diff --git a/client/src/components/History/Content/ContentItem.test.js b/client/src/components/History/Content/ContentItem.test.js
index 53b16dc38d7e..a3c30af4b215 100644
--- a/client/src/components/History/Content/ContentItem.test.js
+++ b/client/src/components/History/Content/ContentItem.test.js
@@ -6,6 +6,7 @@ import { getLocalVue } from "tests/jest/helpers";
 
 import ContentItem from "./ContentItem";
 
+jest.mock("@/schema");
 jest.mock("components/History/model/queries");
 jest.mock("vue-router/composables", () => ({
     useRoute: jest.fn(() => ({})),
diff --git a/client/src/components/History/Content/ContentItem.vue b/client/src/components/History/Content/ContentItem.vue
index ee5723d9f1f5..958b220fe65d 100644
--- a/client/src/components/History/Content/ContentItem.vue
+++ b/client/src/components/History/Content/ContentItem.vue
@@ -1,3 +1,197 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faArrowCircleDown, faArrowCircleUp, faCheckCircle, faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { computed, type ComputedRef } from "vue";
+import { useRoute, useRouter } from "vue-router/composables";
+
+import { updateContentFields } from "@/components/History/model/queries";
+import { useEntryPointStore } from "@/stores/entryPointStore";
+import { clearDrag, setDrag } from "@/utils/setDrag.js";
+
+import { JobStateSummary } from "./Collection/JobStateSummary";
+import { HIERARCHICAL_COLLECTION_JOB_STATES, type State, STATES } from "./model/states";
+
+import CollectionDescription from "./Collection/CollectionDescription.vue";
+import ContentOptions from "./ContentOptions.vue";
+import DatasetDetails from "./Dataset/DatasetDetails.vue";
+import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
+
+library.add(faArrowCircleUp, faArrowCircleDown, faCheckCircle, faSpinner);
+
+const route = useRoute();
+const router = useRouter();
+
+const props = defineProps({
+    id: { type: Number, required: true },
+    item: { type: Object, required: true },
+    name: { type: String, required: true },
+    expandDataset: { type: Boolean, default: false },
+    writable: { type: Boolean, default: true },
+    addHighlightBtn: { type: Boolean, default: false },
+    highlight: { type: String, default: null },
+    isDataset: { type: Boolean, default: true },
+    isHistoryItem: { type: Boolean, default: false },
+    selected: { type: Boolean, default: false },
+    selectable: { type: Boolean, default: false },
+    filterable: { type: Boolean, default: false },
+    isPlaceholder: { type: Boolean, default: false },
+});
+
+// define emits below
+const emit = defineEmits<{
+    (e: "delete", item: any, recursive?: boolean): void;
+    (e: "tag-change", item: any, newTags: string[]): void;
+    (e: "tag-click", tag: string): void;
+    (e: "toggleHighlights", item: any): void;
+    (e: "update:expand-dataset", value: boolean): void;
+    (e: "update:selected", value: boolean): void;
+    (e: "view-collection", item: any, name: string): void;
+    (e: "undelete"): void;
+    (e: "unhide"): void;
+}>();
+
+const entryPointStore = useEntryPointStore();
+
+const jobState = computed(() => new JobStateSummary(props.item));
+
+const contentId = computed(() => `dataset-${props.item.id}`);
+
+const contentCls = computed(() => {
+    const status = contentState.value && contentState.value.status;
+    if (props.selected) {
+        return "alert-info";
+    } else if (!status) {
+        return `alert-success`;
+    } else {
+        return `alert-${status}`;
+    }
+});
+
+const contentState = computed(() => STATES[state.value] && STATES[state.value]);
+
+const hasTags = computed(() => props.item.tags && props.item.tags.length > 0);
+
+const hasStateIcon = computed(() => contentState.value && contentState.value.icon);
+
+const state: ComputedRef<State> = computed(() => {
+    if (props.isPlaceholder) {
+        return "placeholder";
+    }
+    if (props.item.job_state_summary) {
+        for (const state of HIERARCHICAL_COLLECTION_JOB_STATES) {
+            if (props.item.job_state_summary[state] > 0) {
+                return state;
+            }
+        }
+    } else if (props.item.state) {
+        return props.item.state;
+    }
+    return "ok";
+});
+
+const tags = computed(() => props.item.tags);
+
+const tagsDisabled = computed(() => !props.writable || !props.expandDataset || !props.isHistoryItem);
+
+const isCollection = computed(() => "collection_type" in props.item);
+
+type ItemUrlsMap = {
+    [key: string]: string;
+};
+
+/** Relative URLs for history item actions */
+const itemUrls = computed(() => {
+    const id = props.item.id;
+    if (isCollection.value) {
+        return {
+            edit: `/collection/${id}/edit`,
+            showDetails:
+                props.item.job_source_id && props.item.job_source_type === "Job"
+                    ? `/jobs/${props.item.job_source_id}/view`
+                    : null,
+        } as ItemUrlsMap;
+    }
+    return {
+        display: `/datasets/${id}/preview`,
+        edit: `/datasets/${id}/edit`,
+        showDetails: `/datasets/${id}/details`,
+        reportError: `/datasets/${id}/error`,
+        rerun: `/tool_runner/rerun?id=${id}`,
+        visualize: `/visualizations?dataset_id=${id}`,
+    } as ItemUrlsMap;
+});
+
+const isBeingUsed = computed(() => (Object.values(itemUrls.value).includes(route.path) ? "being-used" : ""));
+
+function onClick() {
+    if (props.isPlaceholder) {
+        return;
+    }
+    if (props.isDataset) {
+        emit("update:expand-dataset", !props.expandDataset);
+    } else {
+        emit("view-collection", props.item, props.name);
+    }
+}
+
+function onDelete(recursive = false) {
+    emit("delete", props.item, recursive);
+}
+
+function onDisplay() {
+    const entryPointsForHda: { target: string }[] = entryPointStore.entryPointsForHda(props.item.id);
+    if (entryPointsForHda && entryPointsForHda[0] && entryPointsForHda.length > 0) {
+        // there can be more than one entry point, choose the first
+        const url = entryPointsForHda[0].target;
+        window.open(url, "_blank");
+    } else {
+        router.push(itemUrls.value.display as string, { title: props.name } as any);
+    }
+}
+
+function onDragStart(evt: DragEvent) {
+    setDrag(evt, props.item as any);
+}
+
+function onDragEnd() {
+    clearDrag();
+}
+
+function onEdit() {
+    router.push(itemUrls.value.edit as string);
+}
+
+function onKeyDown(event: KeyboardEvent) {
+    if (!(event.target as HTMLElement)?.classList.contains("content-item")) {
+        return;
+    }
+
+    if (event.key === "Enter" || event.key === " ") {
+        onClick();
+    }
+}
+
+function onShowCollectionInfo() {
+    router.push(itemUrls.value.showDetails as string);
+}
+
+function onTagClick(tag: string) {
+    if (props.filterable) {
+        emit("tag-click", tag);
+    }
+}
+
+function onTags(newTags: string[]) {
+    emit("tag-change", props.item, newTags);
+    updateContentFields(props.item, { tags: newTags });
+}
+
+function toggleHighlights() {
+    emit("toggleHighlights", props.item);
+}
+</script>
+
 <template>
     <div
         :id="contentId"
@@ -10,7 +204,7 @@
         <div class="p-1 cursor-pointer" draggable @dragstart="onDragStart" @dragend="onDragEnd" @click.stop="onClick">
             <div class="d-flex justify-content-between">
                 <span class="p-1" data-description="content item header info">
-                    <b-button v-if="selectable" class="selector p-0" @click.stop="$emit('update:selected', !selected)">
+                    <b-button v-if="selectable" class="selector p-0" @click.stop="emit('update:selected', !selected)">
                         <icon v-if="selected" fixed-width size="lg" :icon="['far', 'check-square']" />
                         <icon v-else fixed-width size="lg" :icon="['far', 'square']" />
                     </b-button>
@@ -67,8 +261,8 @@
                     @display="onDisplay"
                     @showCollectionInfo="onShowCollectionInfo"
                     @edit="onEdit"
-                    @undelete="$emit('undelete')"
-                    @unhide="$emit('unhide')" />
+                    @undelete="emit('undelete')"
+                    @unhide="emit('unhide')" />
             </div>
         </div>
         <CollectionDescription
@@ -100,183 +294,6 @@
     </div>
 </template>
 
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faArrowCircleDown, faArrowCircleUp, faCheckCircle, faSpinner } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { updateContentFields } from "components/History/model/queries";
-import StatelessTags from "components/TagsMultiselect/StatelessTags";
-import { useEntryPointStore } from "stores/entryPointStore";
-
-import { clearDrag, setDrag } from "@/utils/setDrag.js";
-
-import CollectionDescription from "./Collection/CollectionDescription";
-import { JobStateSummary } from "./Collection/JobStateSummary";
-import ContentOptions from "./ContentOptions";
-import DatasetDetails from "./Dataset/DatasetDetails";
-import { HIERARCHICAL_COLLECTION_JOB_STATES, STATES } from "./model/states";
-
-library.add(faArrowCircleUp, faArrowCircleDown, faCheckCircle, faSpinner);
-export default {
-    components: {
-        CollectionDescription,
-        ContentOptions,
-        DatasetDetails,
-        StatelessTags,
-        FontAwesomeIcon,
-    },
-    props: {
-        id: { type: Number, required: true },
-        item: { type: Object, required: true },
-        name: { type: String, required: true },
-        expandDataset: { type: Boolean, default: false },
-        writable: { type: Boolean, default: true },
-        addHighlightBtn: { type: Boolean, default: false },
-        highlight: { type: String, default: null },
-        isDataset: { type: Boolean, default: true },
-        isHistoryItem: { type: Boolean, default: false },
-        selected: { type: Boolean, default: false },
-        selectable: { type: Boolean, default: false },
-        filterable: { type: Boolean, default: false },
-        isPlaceholder: { type: Boolean, default: false },
-    },
-    computed: {
-        jobState() {
-            return new JobStateSummary(this.item);
-        },
-        contentId() {
-            return `dataset-${this.item.id}`;
-        },
-        contentCls() {
-            const status = this.contentState && this.contentState.status;
-            if (this.selected) {
-                return "alert-info";
-            } else if (!status) {
-                return `alert-success`;
-            } else {
-                return `alert-${status}`;
-            }
-        },
-        contentState() {
-            return STATES[this.state] && STATES[this.state];
-        },
-        hasTags() {
-            return this.tags && this.tags.length > 0;
-        },
-        hasStateIcon() {
-            return this.contentState && this.contentState.icon;
-        },
-        state() {
-            if (this.isPlaceholder) {
-                return "placeholder";
-            }
-            if (this.item.job_state_summary) {
-                for (const state of HIERARCHICAL_COLLECTION_JOB_STATES) {
-                    if (this.item.job_state_summary[state] > 0) {
-                        return state;
-                    }
-                }
-            } else if (this.item.state) {
-                return this.item.state;
-            }
-            return "ok";
-        },
-        tags() {
-            return this.item.tags;
-        },
-        tagsDisabled() {
-            return !this.writable || !this.expandDataset || !this.isHistoryItem;
-        },
-        isCollection() {
-            return "collection_type" in this.item;
-        },
-        /** Relative URLs for history item actions */
-        itemUrls() {
-            const id = this.item.id;
-            if (this.isCollection) {
-                return {
-                    edit: `/collection/${id}/edit`,
-                    showDetails:
-                        this.item.job_source_id && this.item.job_source_type === "Job"
-                            ? `/jobs/${this.item.job_source_id}/view`
-                            : null,
-                };
-            }
-            return {
-                display: `/datasets/${id}/preview`,
-                edit: `/datasets/${id}/edit`,
-                showDetails: `/datasets/${id}/details`,
-                reportError: `/datasets/${id}/error`,
-                rerun: `/tool_runner/rerun?id=${id}`,
-                visualize: `/visualizations?dataset_id=${id}`,
-            };
-        },
-        isBeingUsed() {
-            return Object.values(this.itemUrls).includes(this.$route.path) ? "being-used" : "";
-        },
-    },
-    methods: {
-        onKeyDown(event) {
-            if (!event.target.classList.contains("content-item")) {
-                return;
-            }
-
-            if (event.key === "Enter" || event.key === " ") {
-                this.onClick();
-            }
-        },
-        onClick() {
-            if (this.isPlaceholder) {
-                return;
-            }
-            if (this.isDataset) {
-                this.$emit("update:expand-dataset", !this.expandDataset);
-            } else {
-                this.$emit("view-collection", this.item, this.name);
-            }
-        },
-        onDisplay() {
-            const entryPointStore = useEntryPointStore();
-            const entryPointsForHda = entryPointStore.entryPointsForHda(this.item.id);
-            if (entryPointsForHda && entryPointsForHda.length > 0) {
-                // there can be more than one entry point, choose the first
-                const url = entryPointsForHda[0].target;
-                window.open(url, "_blank");
-            } else {
-                this.$router.push(this.itemUrls.display, { title: this.name });
-            }
-        },
-        onDelete(recursive = false) {
-            this.$emit("delete", this.item, recursive);
-        },
-        onDragStart(evt) {
-            setDrag(evt, this.item);
-        },
-        onDragEnd: function () {
-            clearDrag();
-        },
-        onEdit() {
-            this.$router.push(this.itemUrls.edit);
-        },
-        onShowCollectionInfo() {
-            this.$router.push(this.itemUrls.showDetails);
-        },
-        onTags(newTags) {
-            this.$emit("tag-change", this.item, newTags);
-            updateContentFields(this.item, { tags: newTags });
-        },
-        onTagClick(tag) {
-            if (this.filterable) {
-                this.$emit("tag-click", tag);
-            }
-        },
-        toggleHighlights() {
-            this.$emit("toggleHighlights", this.item);
-        },
-    },
-};
-</script>
-
 <style lang="scss" scoped>
 @import "~bootstrap/scss/_functions.scss";
 @import "theme/blue.scss";
diff --git a/client/src/components/History/Content/model/states.ts b/client/src/components/History/Content/model/states.ts
index 67eab750bbce..d08a02ad6908 100644
--- a/client/src/components/History/Content/model/states.ts
+++ b/client/src/components/History/Content/model/states.ts
@@ -2,7 +2,7 @@ import { components } from "@/schema";
 
 type DatasetState = components["schemas"]["DatasetState"];
 // The 'failed' state is for the collection job state summary, not a dataset state.
-type State = DatasetState | "failed" | "placeholder";
+export type State = DatasetState | "failed" | "placeholder";
 
 interface StateRepresentation {
     status: "success" | "warning" | "info" | "danger" | "secondary";