diff --git a/src/dispatch/static/dispatch/src/case/BulkEditSheet.vue b/src/dispatch/static/dispatch/src/case/BulkEditSheet.vue
index 99e2fcef90b0..d420c5cbab57 100644
--- a/src/dispatch/static/dispatch/src/case/BulkEditSheet.vue
+++ b/src/dispatch/static/dispatch/src/case/BulkEditSheet.vue
@@ -45,36 +45,24 @@
   </v-bottom-sheet>
 </template>
 
-<script>
-import { mapFields } from "vuex-map-fields"
-import { mapActions } from "vuex"
-
+<script setup>
+import { computed, ref, watchEffect } from "vue"
+import { useStore } from "vuex"
 import HandoffDialog from "@/case/HandoffDialog.vue"
 import ClosedDialog from "@/case/ClosedDialog.vue"
 
-export default {
-  name: "CaseBulkEditSheet",
-
-  components: {
-    HandoffDialog,
-    ClosedDialog,
-  },
+const store = useStore()
 
-  computed: {
-    ...mapFields("case_management", ["table.rows.selected", "table.bulkEditLoading"]),
+const selected = computed(() => store.state.case_management.table.rows.selected)
+const bulkEditLoading = computed(() => store.state.case_management.table.bulkEditLoading)
+const showBulkEdit = ref(false)
 
-    showBulkEdit: function () {
-      return this.selected.length ? true : false
-    },
-  },
+watchEffect(() => {
+  showBulkEdit.value = selected.value.length > 0
+})
 
-  methods: {
-    ...mapActions("case_management", [
-      "saveBulk",
-      "deleteBulk",
-      "showHandoffDialog",
-      "showClosedDialog",
-    ]),
-  },
-}
+const saveBulk = (status) => store.dispatch("case_management/saveBulk", status)
+const deleteBulk = () => store.dispatch("case_management/deleteBulk")
+const showHandoffDialog = () => store.dispatch("case_management/showHandoffDialog")
+const showClosedDialog = () => store.dispatch("case_management/showClosedDialog")
 </script>
diff --git a/src/dispatch/static/dispatch/src/case/Table.vue b/src/dispatch/static/dispatch/src/case/Table.vue
index 1ca44493824f..0d684ebee060 100644
--- a/src/dispatch/static/dispatch/src/case/Table.vue
+++ b/src/dispatch/static/dispatch/src/case/Table.vue
@@ -34,19 +34,19 @@
             :headers="headers"
             :items="items"
             :items-length="total || 0"
-            v-model:page="page"
-            v-model:items-per-page="itemsPerPage"
-            :footer-props="{
-              'items-per-page-options': [10, 25, 50, 100],
-            }"
-            v-model:sort-by="sortBy"
-            v-model:sort-desc="descending"
             :loading="loading"
             v-model="selected"
             loading-text="Loading... Please wait"
             show-select
             return-object
             @click:row="showCasePage"
+            v-model:page="page"
+            v-model:items-per-page="itemsPerPage"
+            v-model:sort-by="sortBy"
+            v-model:sort-desc="descending"
+            :footer-props="{
+              'items-per-page-options': [10, 25, 50, 100],
+            }"
           >
             <template #item.case_severity.name="{ value }">
               <case-severity :severity="value" />
@@ -190,9 +190,13 @@ const getAll = () => store.dispatch("case_management/getAll")
 
 const items = computed(() => caseManagement.value.table.rows.items)
 const total = computed(() => caseManagement.value.table.rows.total)
-const selected = computed(() => caseManagement.value.table.rows.selected)
 const loading = computed(() => caseManagement.value.table.loading)
 
+const selected = ref([])
+watch(selected, (newVal) => {
+  caseManagement.value.table.rows.selected = newVal
+})
+
 const showCasePage = (e, { item }) => {
   router.push({ name: "CasePage", params: { name: item.name } })
 }