diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 16bb7c5ad0..7db22a7666 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -613,7 +613,10 @@
         "bmcDumpEntry": "BMC Dump Entry",
         "hostbootDumpEntry": "Hostboot Dump Entry",
         "resourceDumpEntry": "Resource Dump Entry",
-        "systemDumpEntry": "System Dump Entry"
+        "systemDumpEntry": "System Dump Entry",
+        "hardwareDumpEntry": "Hardware Dump Entry",
+        "sbeDumpEntry": "SBE Dump Entry",
+        "ocmbSbeDumpEntry": "OCMB SBE Dump Entry"
       }
     },
     "toast": {
diff --git a/src/router/routes.js b/src/router/routes.js
index 163fe802b2..70819215b5 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -40,6 +40,7 @@ import EventLogs from '@/views/Logs/EventLogs';
 import FieldCoreOverride from '@/views/ResourceManagement/FieldCoreOverride';
 import ServiceLoginConsoles from '@/views/Operations/ServiceLoginConsoles/ServiceLoginConsoles.vue';
 import ServiceLogin from '@/views/Operations/ServiceLoginConsoles';
+import Dumps from '@/views/Logs/Dumps';
 
 const roles = {
   administrator: 'Administrator',
@@ -190,6 +191,14 @@ export const routes = [
           title: i18n.global.t('appPageTitle.auditLogs'),
         },
       },
+      {
+        path: '/logs/dumps',
+        name: 'dumps',
+        component: Dumps,
+        meta: {
+          title: i18n.global.t('appPageTitle.dumps'),
+        },
+      },
       {
         path: '/logs/post-code-logs',
         name: 'post-code-logs',
diff --git a/src/store/modules/Logs/DumpsStore.js b/src/store/modules/Logs/DumpsStore.js
index 3bc0d678c8..be0b28cc06 100644
--- a/src/store/modules/Logs/DumpsStore.js
+++ b/src/store/modules/Logs/DumpsStore.js
@@ -11,6 +11,9 @@ export const DumpsStore = defineStore('dumps', {
     allDumpsGetter: (state) => state.allDumps,
   },
   actions: {
+    async getTask() {
+      return await api.get('/redfish/v1/TaskService/Tasks');
+    },
     async getBmcDumpEntries() {
       return api
         .get('/redfish/v1/')
diff --git a/src/views/Logs/Dumps/Dumps.vue b/src/views/Logs/Dumps/Dumps.vue
index 13bebf0567..43005a4b0e 100644
--- a/src/views/Logs/Dumps/Dumps.vue
+++ b/src/views/Logs/Dumps/Dumps.vue
@@ -1,8 +1,8 @@
 <template>
-  <b-container fluid="xl">
+  <BContainer fluid="xl">
     <page-title :title="$t('appPageTitle.dumps')" />
-    <b-row v-if="selectedDumpType">
-      <b-col md="8" xl="6">
+    <BRow v-if="selectedDumpType">
+      <BCol md="8" xl="6">
         <alert variant="info" class="mb-4">
           <div class="font-weight-bold">
             {{ $t(`pageDumps.alert.${selectedDumpType}DumpHeading`) }}
@@ -38,76 +38,78 @@
             {{ $t(`pageDumps.alert.systemDumpMessageHmc${hmcManaged}`) }}
           </p>
         </alert>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col sm="6" lg="5" xl="4">
+      </BCol>
+    </BRow>
+    <BRow>
+      <BCol sm="6" lg="5" xl="4">
         <page-section :section-title="$t('pageDumps.initiateDump')">
-          <dumps-form @updateDumpInfo="updateDumpInfo" />
+          <dumps-form @updateDumpInfo="updateDumpInfo"/>
         </page-section>
-      </b-col>
-    </b-row>
-    <b-row>
-      <b-col xl="10">
+      </BCol>
+    </BRow>
+    <BRow>
+      <BCol xl="10">
         <page-section :section-title="$t('pageDumps.dumpsAvailableOnBmc')">
-          <b-row class="align-items-start">
-            <b-col sm="8" xl="6" class="d-sm-flex align-items-end">
+          <BRow class="align-items-start">
+            <BCol sm="8" xl="6" class="d-sm-flex align-items-end mb-4 searchStyle">
               <search
                 :placeholder="$t('pageDumps.table.searchDumps')"
-                @change-search="onChangeSearchInput"
-                @clear-search="onClearSearchInput"
+                @change-search="onChangeSearch"
+                @clear-search="onClearSearch"
               />
-              <div class="ml-sm-4">
+              <div class="ml-sm-4 margin-style">
                 <table-cell-count
                   :filtered-items-count="filteredRows"
                   :total-number-of-cells="allDumps.length"
                 ></table-cell-count>
               </div>
-            </b-col>
-            <b-col sm="8" md="7" xl="6">
+            </BCol>
+            <BCol sm="8" md="7" xl="6">
               <table-date-filter @change="onChangeDateTimeFilter" />
-            </b-col>
-          </b-row>
-          <b-row>
-            <b-col class="text-right">
+            </BCol>
+          </BRow>
+          <BRow>
+            <BCol class="text-right">
               <table-filter
                 :filters="tableFilters"
                 @filter-change="onFilterChange"
               />
-            </b-col>
-          </b-row>
-          <table-toolbar
-            :selected-items-count="selectedRows.length"
+            </BCol>
+          </BRow>
+          <!-- <table-toolbar
+            :selected-items-count="selectedRowsList.length"
             :actions="batchActions"
-            @clear-selected="clearSelectedRows($refs.table)"
+            @clear-selected="clearSelectedRows(tableDumps)"
             @batch-action="onTableBatchAction"
-          />
-          <b-table
-            ref="table"
+          /> -->
+          <BTable
+            id="table-dumps"
+            ref="tableDumps"
+            class="tableStyle"
             show-empty
             hover
             sort-icon-left
             no-sort-reset
-            sort-desc
             selectable
             no-select-on-click
             responsive="md"
-            sort-by="dateTime"
+            :sort-by="[{ key: 'dateTime', order: 'asc' }]"
+            sticky-header="75vh"
             :fields="fields"
             :items="filteredDumps"
             :empty-text="$t('global.table.emptyMessage')"
             :empty-filtered-text="$t('global.table.emptySearchMessage')"
-            :per-page="perPage"
-            :current-page="currentPage"
-            :filter="searchFilter"
+            :per-page="itemPerPage"
+            :current-page="currentPageNo"
+            :filter="searchFilterInput"
             :busy="isBusy"
             @filtered="onFiltered"
-            @row-selected="onRowSelected($event, filteredTableItems.length)"
+            @row-selected="onRowSelected($event, filteredDumps.length)"
           >
             <!-- Date and Time column -->
             <template #cell(dateTime)="{ value }">
-              <p class="mb-0">{{ value | formatDate }}</p>
-              <p class="mb-0">{{ value | formatTime }}</p>
+              <p class="mb-0">{{ $filters.formatDate(value) }}</p>
+              <p class="mb-0">{{ $filters.formatTime(value) }}</p>
             </template>
 
             <!-- Size column -->
@@ -122,6 +124,7 @@
                 :key="index"
                 :value="action.value"
                 :title="action.title"
+                :row-data="row.item"
                 :download-location="row.item.data"
                 :export-name="exportFileName(row)"
                 @click-table-action="onTableRowAction($event, row.item)"
@@ -132,13 +135,13 @@
                 </template>
               </table-row-action>
             </template>
-          </b-table>
+          </BTable>
         </page-section>
-      </b-col>
-    </b-row>
+      </BCol>
+    </BRow>
     <!-- Table pagination -->
-    <b-row>
-      <b-col sm="6" xl="5">
+    <BRow>
+      <BCol sm="6" xl="5">
         <b-form-group
           class="table-pagination-select"
           :label="$t('global.table.itemsPerPage')"
@@ -146,105 +149,95 @@
         >
           <b-form-select
             id="pagination-items-per-page"
-            v-model="perPage"
+            v-model="itemPerPage"
             :options="itemsPerPageOptions"
           />
         </b-form-group>
-      </b-col>
-      <b-col sm="6" xl="5">
+      </BCol>
+      <BCol sm="6" xl="5">
         <b-pagination
-          v-model="currentPage"
+          v-model="currentPageNo"
+          class="b-pagination"
           first-number
           last-number
-          :per-page="perPage"
-          :total-rows="getTotalRowCount(filteredRows)"
+          :per-page="itemPerPage"
+          :total-rows="getTotalRowCount(filteredRows, itemPerPage)"
           aria-controls="table-dump-entries"
         />
-      </b-col>
-    </b-row>
-  </b-container>
+      </BCol>
+    </BRow>
+    <BModal
+      v-model="openModal"
+      :title="$t('pageDumps.modal.deleteDump')"
+      :ok-title="$t('pageDumps.modal.deleteDump')"
+      okVariant="danger"
+      :cancel-title="$t('global.action.cancel')"
+      @ok="handleOk"
+    >
+      <p>
+        {{
+          $t('pageDumps.modal.deleteDumpConfirmation')
+        }}
+      </p>
+    </BModal>
+  </BContainer>
 </template>
 
-<script>
-import Alert from '@/components/Global/Alert';
+<script setup>
+import { ref, computed, onBeforeMount, onMounted } from 'vue';
+import i18n from '@/i18n';
+import { onBeforeRouteLeave } from 'vue-router';
+import Alert from '@/components/Global/Alert.vue';
 import IconDelete from '@carbon/icons-vue/es/trash-can/20';
 import IconDownload from '@carbon/icons-vue/es/download/20';
-import DumpsForm from './DumpsForm';
-import PageSection from '@/components/Global/PageSection';
-import PageTitle from '@/components/Global/PageTitle';
-import Search from '@/components/Global/Search';
-import TableCellCount from '@/components/Global/TableCellCount';
-import TableDateFilter from '@/components/Global/TableDateFilter';
-import TableRowAction from '@/components/Global/TableRowAction';
-import TableToolbar from '@/components/Global/TableToolbar';
-import BVTableSelectableMixin, {
-  selectedRows,
-} from '@/components/Mixins/BVTableSelectableMixin';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import BVPaginationMixin, {
-  currentPage,
-  perPage,
-  itemsPerPageOptions,
-} from '@/components/Mixins/BVPaginationMixin';
-import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
-import SearchFilterMixin, {
-  searchFilter,
-} from '@/components/Mixins/SearchFilterMixin';
-import TableFilter from '@/components/Global/TableFilter';
-import TableFilterMixin from '@/components/Mixins/TableFilterMixin';
+import DumpsForm from './DumpsForm.vue';
+import PageSection from '@/components/Global/PageSection.vue';
+import PageTitle from '@/components/Global/PageTitle.vue';
+import Search from '@/components/Global/Search.vue';
+import TableCellCount from '@/components/Global/TableCellCount.vue';
+import TableDateFilter from '@/components/Global/TableDateFilter.vue';
+import TableRowAction from '@/components/Global/TableRowAction.vue';
+// import TableToolbar from '@/components/Global/TableToolbar.vue';
+// import useTableSelectableComposable from '@/components/Composables/useTableSelectableComposable';
+import useToast from '@/components/Composables/useToastComposable';
+import usePaginationComposable from '@/components/Composables/usePaginationComposable';
+import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
+import useTableFilterComposable from '@/components/Composables/useTableFilterComposable';
+import { DumpsStore, UserManagementStore, ResourceMemoryStore,  GlobalStore } from '@/store';
+import eventBus from '@/eventBus';
+
+const { hideLoader, startLoader, endLoader } = useLoadingBar();
+const { currentPage, perPage, itemsPerPageOptions, getTotalRowCount } = usePaginationComposable();
+// const { selectedRowsList } = useTableSelectableComposable();
+const { getFilteredTableData, getFilteredTableDataByDate } = useTableFilterComposable();
+const { successToast, errorToast } = useToast();
+
+const dumps = DumpsStore();
+const userManagement = UserManagementStore();
+const resourceMemory = ResourceMemoryStore();
+const global = GlobalStore();
 
-export default {
-  components: {
-    Alert,
-    DumpsForm,
-    IconDelete,
-    IconDownload,
-    PageSection,
-    PageTitle,
-    Search,
-    TableCellCount,
-    TableDateFilter,
-    TableRowAction,
-    TableToolbar,
-    TableFilter,
-  },
-  mixins: [
-    BVTableSelectableMixin,
-    BVToastMixin,
-    BVPaginationMixin,
-    LoadingBarMixin,
-    SearchFilterMixin,
-    TableFilterMixin,
-  ],
-  beforeRouteLeave(to, from, next) {
-    // Hide loader if the user navigates to another page
-    // before request is fulfilled.
-    this.hideLoader();
-    next();
-  },
-  data() {
-    return {
-      isBusy: true,
-      selectedDumpType: null,
-      fields: [
+const isBusy = ref(true);
+const selectedDumpType = ref('');
+const fields = ref([
         {
           key: 'id',
-          label: this.$t('pageDumps.table.id'),
+          label: i18n.global.t('pageDumps.table.id'),
           sortable: true,
         },
         {
           key: 'dateTime',
-          label: this.$t('pageDumps.table.dateAndTime'),
+          label: i18n.global.t('pageDumps.table.dateAndTime'),
           sortable: true,
         },
         {
           key: 'dumpType',
-          label: this.$t('pageDumps.table.dumpType'),
+          label: i18n.global.t('pageDumps.table.dumpType'),
           sortable: true,
         },
         {
           key: 'size',
-          label: this.$t('pageDumps.table.size'),
+          label: i18n.global.t('pageDumps.table.size'),
           sortable: true,
         },
         {
@@ -253,183 +246,230 @@ export default {
           label: '',
           tdClass: 'text-right text-nowrap',
         },
-      ],
-      batchActions: [
-        {
-          value: 'delete',
-          label: this.$t('global.action.delete'),
-        },
-      ],
-      tableFilters: [
+      ]);
+// const batchActions = ref([
+//         {
+//           value: 'delete',
+//           label: i18n.global.t('global.action.delete'),
+//         },
+//       ]);
+const tableFilters = ref([
         {
           key: 'dumpType',
-          label: this.$t('pageDumps.table.dumpType'),
+          label: i18n.global.t('pageDumps.table.dumpType'),
           values: [
-            this.$t('pageDumps.table.filter.bmcDumpEntry'),
-            this.$t('pageDumps.table.filter.hostbootDumpEntry'),
-            this.$t('pageDumps.table.filter.resourceDumpEntry'),
-            this.$t('pageDumps.table.filter.systemDumpEntry'),
+          i18n.global.t('pageDumps.table.filter.bmcDumpEntry'),
+          i18n.global.t('pageDumps.table.filter.hostbootDumpEntry'),
+          i18n.global.t('pageDumps.table.filter.resourceDumpEntry'),
+          i18n.global.t('pageDumps.table.filter.systemDumpEntry'),
+          i18n.global.t('pageDumps.table.filter.hardwareDumpEntry'),
+          i18n.global.t('pageDumps.table.filter.sbeDumpEntry'),
+          i18n.global.t('pageDumps.table.filter.ocmbSbeDumpEntry')
           ],
         },
-      ],
-      activeFilters: [],
-      currentPage: currentPage,
-      filterEndDate: null,
-      filterStartDate: null,
-      itemsPerPageOptions: itemsPerPageOptions,
-      perPage: perPage,
-      searchFilter,
-      searchTotalFilteredRows: 0,
-      selectedRows,
-    };
-  },
-  computed: {
-    filteredRows() {
-      return this.searchFilter
-        ? this.searchTotalFilteredRows
-        : this.filteredDumps.length;
-    },
-    allDumps() {
-      return this.$store.getters['dumps/allDumps'].map((item) => {
+      ]);
+const activeFiltersRows = ref([]);
+const currentPageNo = ref(currentPage);
+const itemPerPage = ref(perPage);
+const filterEndDate = ref(null);
+const filterStartDate = ref(null);
+const searchFilterInput = ref('');
+const searchTotalFilteredRows = ref(0);
+const openModal = ref(false);
+const dump = ref();
+
+onBeforeRouteLeave(() => {
+  hideLoader();
+});
+
+onBeforeMount(() => {
+  startLoader();
+    Promise.all([
+      dumps.getAllDumps(),
+      userManagement.getUsers(),
+      resourceMemory.getHmcManaged(),
+      global.getBootProgress(),
+    ]).finally(() => {
+      endLoader();
+      isBusy.value = false;
+    });
+});
+onMounted(() => {
+      eventBus.on('updateDumpInfo', updateDumpInfo);
+    });
+const filteredRows = computed(() => {
+      return searchFilterInput.value
+        ? searchTotalFilteredRows.value
+        : filteredDumps.value.length;
+    });
+const allDumps = computed(() => {
+      return dumps.allDumpsGetter.map((item) => {
         return {
           ...item,
           actions: [
             {
               value: 'download',
-              title: this.$t('global.action.download'),
+              title: i18n.global.t('global.action.download'),
             },
             {
               value: 'delete',
-              title: this.$t('global.action.delete'),
+              title: i18n.global.t('global.action.delete'),
             },
           ],
         };
       });
-    },
-    filteredDumpsByDate() {
-      return this.getFilteredTableDataByDate(
-        this.allDumps,
-        this.filterStartDate,
-        this.filterEndDate,
-        'dateTime',
+    });
+const filteredDumpsByDate = computed(() => {
+      return getFilteredTableDataByDate(
+        allDumps.value,
+        filterStartDate.value,
+        filterEndDate.value,
+        'dateTime'
       );
-    },
-    filteredDumps() {
-      return this.getFilteredTableData(
-        this.filteredDumpsByDate,
-        this.activeFilters,
+    });
+const filteredDumps = computed(() => {
+      return getFilteredTableData(
+        filteredDumpsByDate.value,
+        activeFiltersRows.value,
       );
-    },
-    isInPhypStandby() {
-      return this.$store.getters['global/isInPhypStandby'];
-    },
-    hmcManaged() {
-      return this.$store.getters['resourceMemory/hmcManaged'];
-    },
-  },
-  created() {
-    this.startLoader();
-    Promise.all([
-      this.$store.dispatch('dumps/getAllDumps'),
-      this.$store.dispatch('userManagement/getUsers'),
-      this.$store.dispatch('resourceMemory/getHmcManaged'),
-      this.$store.dispatch('global/getBootProgress'),
-    ]).finally(() => {
-      this.endLoader();
-      this.isBusy = false;
     });
-  },
-  methods: {
-    updateDumpInfo(selectedDumpType) {
-      this.selectedDumpType = selectedDumpType;
-    },
-    convertBytesToMegabytes(bytes) {
+const isInPhypStandby = computed(() => {
+      return global.isInPhypStandby;
+    });
+const hmcManaged = computed(() => {
+      return resourceMemory.hmcManagedGetter;
+    });
+
+const updateDumpInfo = (selectedDumpTypeVal) => {
+      selectedDumpType.value = selectedDumpTypeVal.toString();
+    };
+const convertBytesToMegabytes = (bytes) => {
       return parseFloat((bytes / 1000000).toFixed(3));
-    },
-    onFilterChange({ activeFilters }) {
-      this.activeFilters = activeFilters;
-    },
-    onFiltered(filteredItems) {
-      this.searchTotalFilteredRows = filteredItems.length;
-    },
-    onChangeDateTimeFilter({ fromDate, toDate }) {
-      this.filterStartDate = fromDate;
-      this.filterEndDate = toDate;
-    },
-    onTableRowAction(action, dump) {
+    };
+const onFilterChange = ({ activeFilters }) => {
+      activeFiltersRows.value = activeFilters;
+    };
+const onFiltered = (filteredItems) => {
+      searchTotalFilteredRows.value = filteredItems.length;
+    };
+const onChangeDateTimeFilter = ({ fromDate, toDate }) => {
+      filterStartDate.value = fromDate;
+      filterEndDate.value = toDate;
+    };
+const onTableRowAction = (action, dump) => {
       if (action === 'delete') {
-        this.$bvModal
-          .msgBoxConfirm(this.$tc('pageDumps.modal.deleteDumpConfirmation'), {
-            title: this.$tc('pageDumps.modal.deleteDump'),
-            okTitle: this.$tc('pageDumps.modal.deleteDump'),
-            cancelTitle: this.$t('global.action.cancel'),
-          })
-          .then((deleteConfrimed) => {
-            if (deleteConfrimed) {
-              this.$store
-                .dispatch('dumps/deleteDumps', [dump])
+        openModal.value = true;
+        dump.value = dump;
+        // this.$bvModal
+        //   .msgBoxConfirm(i18n.global.t('pageDumps.modal.deleteDumpConfirmation'), {
+        //     title: i18n.global.t('pageDumps.modal.deleteDump'),
+        //     okTitle: i18n.global.t('pageDumps.modal.deleteDump'),
+        //     cancelTitle: i18n.global.t('global.action.cancel'),
+        //   })
+        //   .then((deleteConfrimed) => {
+        //     if (deleteConfrimed) {
+        //       dumps.deleteDumps([dump])
+        //         .then((messages) => {
+        //           messages.forEach(({ type, message }) => {
+        //             if (type === 'success') {
+        //               successToast(message);
+        //             } else if (type === 'error') {
+        //               errorToast(message);
+        //             }
+        //           });
+        //         });
+        //     }
+        //   });
+      }
+    };
+const handleOk = () => {
+  openModal.value = false;
+  dumps.deleteDumps([dump.value])
                 .then((messages) => {
                   messages.forEach(({ type, message }) => {
                     if (type === 'success') {
-                      this.successToast(message);
+                      successToast(message);
                     } else if (type === 'error') {
-                      this.errorToast(message);
+                      errorToast(message);
                     }
                   });
                 });
-            }
-          });
-      }
-    },
-    onTableBatchAction(action) {
-      if (action === 'delete') {
-        this.$bvModal
-          .msgBoxConfirm(
-            this.$tc(
-              'pageDumps.modal.deleteDumpConfirmation',
-              this.selectedRows.length,
-            ),
-            {
-              title: this.$tc(
-                'pageDumps.modal.deleteDump',
-                this.selectedRows.length,
-              ),
-              okTitle: this.$tc(
-                'pageDumps.modal.deleteDump',
-                this.selectedRows.length,
-              ),
-              cancelTitle: this.$t('global.action.cancel'),
-            },
-          )
-          .then((deleteConfrimed) => {
-            if (deleteConfrimed) {
-              if (this.selectedRows.length === this.dumps.length) {
-                this.$store
-                  .dispatch('dumps/deleteAllDumps')
-                  .then((success) => this.successToast(success))
-                  .catch(({ message }) => this.errorToast(message));
-              } else {
-                this.$store
-                  .dispatch('dumps/deleteDumps', this.selectedRows)
-                  .then((messages) => {
-                    messages.forEach(({ type, message }) => {
-                      if (type === 'success') {
-                        this.successToast(message);
-                      } else if (type === 'error') {
-                        this.errorToast(message);
-                      }
-                    });
-                  });
-              }
-            }
-          });
-      }
-    },
-    exportFileName(row) {
+    };
+// const onTableBatchAction = (action) => {
+//       if (action === 'delete') {
+//         this.$bvModal
+//           .msgBoxConfirm(
+//             i18n.global.t(
+//               'pageDumps.modal.deleteDumpConfirmation',
+//               selectedRowsList.length,
+//             ),
+//             {
+//               title: i18n.global.t(
+//                 'pageDumps.modal.deleteDump',
+//                 selectedRowsList.length,
+//               ),
+//               okTitle: i18n.global.t(
+//                 'pageDumps.modal.deleteDump',
+//                 selectedRowsList.length,
+//               ),
+//               cancelTitle: i18n.global.t('global.action.cancel'),
+//             },
+//           )
+//           .then((deleteConfrimed) => {
+//             if (deleteConfrimed) {
+//               if (this.selectedRows.length === this.dumps.length) {
+//                 this.$store
+//                   .dispatch('dumps/deleteAllDumps')
+//                   .then((success) => successToast(success))
+//                   .catch(({ message }) => errorToast(message));
+//               } else {
+//                 this.$store
+//                   .dispatch('dumps/deleteDumps', this.selectedRows)
+//                   .then((messages) => {
+//                     messages.forEach(({ type, message }) => {
+//                       if (type === 'success') {
+//                         successToast(message);
+//                       } else if (type === 'error') {
+//                         errorToast(message);
+//                       }
+//                     });
+//                   });
+//               }
+//             }
+//           });
+//       }
+//     };
+const onChangeSearch = (event) => {
+  searchFilterInput.value = event;
+};
+const onClearSearch = () => {
+  searchFilterInput.value = '';
+};
+const exportFileName = (row) => {
       let filename = row.item.dumpType + '_' + row.item.id;
       filename = filename.replace(RegExp(' ', 'g'), '_');
       return filename;
-    },
-  },
-};
+    };
 </script>
+<style lang="scss" scoped>
+#table-dumps {
+  td .btn-link {
+    width: auto !important;
+  }
+}
+.searchStyle {
+  height: 74px;
+  top: 22px;
+  position: relative;
+}
+.margin-style {
+  margin-bottom: 23px;
+  margin-left: 10px;
+}
+.text-right {
+  text-align: right;
+}
+.tableStyle {
+  overflow-x: hidden;
+}
+</style>
diff --git a/src/views/Logs/Dumps/DumpsForm.vue b/src/views/Logs/Dumps/DumpsForm.vue
index 11f642d2ed..ca99851a61 100644
--- a/src/views/Logs/Dumps/DumpsForm.vue
+++ b/src/views/Logs/Dumps/DumpsForm.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="form-background p-3">
-    <b-form id="form-new-dump" novalidate @submit.prevent="handleSubmit">
-      <b-form-group
+    <BForm id="form-new-dump" novalidate @submit.prevent="handleSubmit">
+      <BFormGroup
         :label="$t('pageDumps.form.selectDumpType')"
         label-for="selectDumpType"
       >
@@ -9,25 +9,25 @@
           {{ $t('pageDumps.form.selectDumpType') }}
           <info-tooltip :title="$t('pageDumps.form.selectDumpTypeTooltip')" />
         </template>
-        <b-form-select
+        <BFormSelect
           id="selectDumpType"
           v-model="selectedDumpType"
           :options="updatedDumpTypeOptions"
-          :state="getValidationState($v.selectedDumpType)"
+          :state="getValidationState(v$.selectedDumpType)"
           @change="updateDumpInfo"
         >
           <template #first>
-            <b-form-select-option :value="''" disabled>
+            <BFormSelectOption :value="''" disabled>
               {{ $t('global.form.selectAnOption') }}
-            </b-form-select-option>
+            </BFormSelectOption>
           </template>
-        </b-form-select>
-        <b-form-invalid-feedback role="alert">
+        </BFormSelect>
+        <BFormInvalidFeedback role="alert">
           {{ $t('global.form.required') }}
-        </b-form-invalid-feedback>
-      </b-form-group>
+        </BFormInvalidFeedback>
+      </BFormGroup>
       <template v-if="selectedDumpType === 'resource'">
-        <b-form-group label-for="resourceSelector">
+        <BFormGroup label-for="resourceSelector">
           <template #label>
             {{ $t('pageDumps.form.resourceSelector') }}
             <info-tooltip
@@ -35,28 +35,27 @@
             />
           </template>
 
-          <b-form-input id="resourceSelector" v-model="resourceSelectorValue">
-          </b-form-input>
-        </b-form-group>
+          <BForm-input id="resourceSelector" v-model="resourceSelectorValue">
+          </BForm-input>
+        </BFormGroup>
         <template v-if="isServiceUser">
-          <b-form-group label-for="password">
+          <BFormGroup label-for="password">
             <template #label>
               {{ $t('pageDumps.form.password') }}
               <info-tooltip :title="$t('pageDumps.form.passwordTooltip')" />
             </template>
             <input-password-toggle>
-              <b-form-input
+              <BForm-input
                 id="password"
                 v-model="resourcePassword"
                 autocomplete="off"
                 type="password"
               >
-              </b-form-input>
+              </BForm-input>
             </input-password-toggle>
-          </b-form-group>
+          </BFormGroup>
         </template>
       </template>
-
       <b-button
         :disabled="isButtonDisabled"
         variant="primary"
@@ -65,11 +64,13 @@
       >
         {{ $t('pageDumps.form.initiateDump') }}
       </b-button>
-    </b-form>
+    </BForm>
     <modal-confirmation
+      v-modal="modalConfirmation"
       @ok="createSystemDump($t(`pageDumps.form.${selectedDumpType}Dump`))"
     />
     <modal-partition-dump-confirmation
+      v-modal="modalPartition"
       :selected="selectedDumpType"
       @ok="
         selectedDumpType === 'partition'
@@ -80,230 +81,278 @@
   </div>
 </template>
 
-<script>
-import { required } from 'vuelidate/lib/validators';
-import ModalConfirmation from './DumpsModalConfirmation';
-import ModalPartitionDumpConfirmation from './DumpsPartitionModalConfirmation';
-import InfoTooltip from '@/components/Global/InfoTooltip';
-import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
-import BVToastMixin from '@/components/Mixins/BVToastMixin';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+<script setup>
+import i18n from '@/i18n';
+import { computed, ref, onBeforeMount, watch, nextTick } from 'vue';
+import { required } from '@vuelidate/validators';
+import ModalConfirmation from './DumpsModalConfirmation.vue';
+import ModalPartitionDumpConfirmation from './DumpsPartitionModalConfirmation.vue';
+import InfoTooltip from '@/components/Global/InfoTooltip.vue';
+import InputPasswordToggle from '@/components/Global/InputPasswordToggle.vue';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
+import useToast from '@/components/Composables/useToastComposable';
+import { useVuelidate } from '@vuelidate/core';
+import { GlobalStore, IBMiServiceFunctionsStore, BootSettingsStore, UserManagementStore, DumpsStore } from '@/store/index.js';
+import eventBus from '@/eventBus';
 
-export default {
-  components: {
-    InfoTooltip,
-    InputPasswordToggle,
-    ModalConfirmation,
-    ModalPartitionDumpConfirmation,
-  },
-  mixins: [BVToastMixin, VuelidateMixin],
-  data() {
-    return {
-      selectedDumpType: '',
-      resourceSelectorValue: null,
-      resourcePassword: null,
-      dumpTypeOptions: [],
-    };
-  },
-  computed: {
-    isOSRunning() {
-      return this.$store.getters['global/isOSRunning'];
-    },
-    availableFunctions() {
-      return this.$store.getters['ibmiServiceFunctions/serviceFunctions'];
-    },
-    isIBMi() {
+const { getValidationState } = useVuelidateComposable();
+const { successToast, errorToast, infoToast } = useToast();
+
+const global = GlobalStore();
+const ibmiServiceFunctions = IBMiServiceFunctionsStore();
+const serverBootSettings = BootSettingsStore();
+const userManagement = UserManagementStore();
+const dumps = DumpsStore()
+
+const selectedDumpType =  ref('');
+const resourceSelectorValue = ref(null);
+const resourcePassword = ref(null);
+const dumpTypeOptions = ref([]);
+const taskProgress = ref('');
+const modalConfirmation = ref('false')
+const modalPartition = ref('false')
+
+onBeforeMount(() => {
+    checkForUserData();
+    checkIfInPhypStandby();
+    Promise.all([
+      global.getHmcManaged(),
+      global.getBootProgress(),
+      ibmiServiceFunctions.getAvailableServiceFunctions(),
+      serverBootSettings.getBiosAttributes,
+    ]);
+  });
+
+const rules = computed(() => ({
+      selectedDumpType: { required },
+    }
+  ));
+const v$ = useVuelidate(rules, { selectedDumpType });
+
+const isOSRunning = computed(() => {
+      return global.isOSRunningGetter;
+    });
+const availableFunctions = computed(() => {
+      return ibmiServiceFunctions.serviceFunctionsGetter;
+    });
+const isIBMi = computed(() => {
       if (
-        this.attributeKeys?.pvm_default_os_type === 'Default' ||
-        this.attributeKeys?.pvm_default_os_type === 'IBM I'
+        attributeKeys.value?.pvm_default_os_type === 'Default' ||
+        attributeKeys.value?.pvm_default_os_type === 'IBM I'
       ) {
         return true;
       } else {
         return false;
       }
-    },
-    attributeKeys() {
-      return this.$store.getters['serverBootSettings/biosAttributes'];
-    },
-    currentUser() {
-      return this.$store.getters['global/currentUser'];
-    },
-    isServiceUser() {
-      return this.$store.getters['global/isServiceUser'];
-    },
-    isInPhypStandby() {
-      return this.$store.getters['global/isInPhypStandby'];
-    },
-    updatedDumpTypeOptions() {
-      return this.setDumpTypeOptions();
-    },
-    hmcInfo() {
-      return this.$store?.getters['global/hmcManaged'];
-    },
-    isButtonDisabled() {
+    });
+const attributeKeys = computed(() => {
+      return serverBootSettings.getBiosAttributes;
+    });
+const currentUser = computed(() => {
+      return global.currentUserGetter;
+    });
+const isServiceUser = computed(() => {
+      return global.isServiceUser;
+    });
+const isInPhypStandby = computed(() => {
+      return global.isInPhypStandby;
+    });
+const updatedDumpTypeOptions = computed(() => {
+      return setDumpTypeOptions();
+    });
+const hmcInfo = computed(() => {
+      return global.hmcManagedGetter;
+    });
+const isButtonDisabled = computed(() => {
       if (
-        !this.isOSRunning &&
-        (this.selectedDumpType === 'partition' ||
-          this.selectedDumpType === 'retryPartition')
+        !isOSRunning.value &&
+        (selectedDumpType.value === 'partition' ||
+          selectedDumpType.value === 'retryPartition')
       ) {
         return true;
       } else if (
-        this.isOSRunning &&
-        (this.selectedDumpType === 'partition' ||
-          this.selectedDumpType === 'retryPartition')
+        isOSRunning.value &&
+        (selectedDumpType.value === 'partition' ||
+          selectedDumpType.value === 'retryPartition')
       ) {
-        if (this.selectedDumpType === 'partition') {
-          return this.isFunctionDisabled(22);
+        if (selectedDumpType.value === 'partition') {
+          return isFunctionDisabled(22);
         } else {
-          return this.isFunctionDisabled(34);
+          return isFunctionDisabled(34);
         }
       } else {
         return false;
       }
-    },
-  },
-  created() {
-    this.checkForUserData();
-    this.checkIfInPhypStandby();
-    Promise.all([
-      this.$store.dispatch('global/getHmcManaged'),
-      this.$store.dispatch('global/getBootProgress'),
-      this.$store.dispatch('ibmiServiceFunctions/getAvailableServiceFunctions'),
-      this.$store.dispatch('serverBootSettings/getBiosAttributes'),
-    ]);
-  },
-  validations() {
-    return {
-      selectedDumpType: { required },
+    });
+    
+const checkTask = async() => {
+      //getting list of all tasks and getting the api to the most recent task
+      const taskObj = await dumps.getTask();
+      taskProgress.value = taskObj.data.Members[taskObj.data.Members.length - 1];
+      const taskLink = taskProgress.value['@odata.id'];
+      //going to the most recent task
+      const currentTask = async () => {
+        return await global.getCurrentTask(taskLink);
+      };
+      const currentTaskProgress = (checkCounter = 0) => {
+        checkCounter++;
+        //if 'TaskState' is in running state for more than 20 mins, error message will be displayed to the user
+        if (checkCounter > 40) {
+          return errorToast(i18n.global.t('pageDumps.toast.resourceDumpFailed'));
+        }
+        Promise.all([currentTask()]).then((res) => {
+          //monitor the value of parameter 'TaskState'
+          const taskState = res[0]['TaskState'];
+          //if TaskState is completed
+          if (taskState == 'Completed') {
+            successToast(i18n.global.t('pageDumps.toast.resourceDumpSuccess'));
+            //if TaskState is running/in progress
+          } else if (taskState == 'Running') {
+            //reload the api after every 30 seconds till 20 mins to check if the 'TaskState' is changed to Completed or Cancelled
+            setTimeout(() => {
+              currentTaskProgress(checkCounter);
+            }, 30000);
+            //if TaskState is Cancelled
+          } else if (taskState == 'Cancelled') {
+            errorToast(i18n.global.t('pageDumps.toast.resourceDumpFailed'));
+          }
+        });
+      };
+      //trigger funtion to check 'TaskState'
+      if (taskLink) {
+        currentTaskProgress(0);
+      } else {
+        return errorToast(i18n.global.t('pageDumps.toast.resourceDumpFailed'));
+      }
     };
-  },
-  methods: {
-    checkForUserData() {
-      if (!this.currentUser) {
-        this.$store.dispatch('userManagement/getUsers');
-        this.$store.dispatch('global/getCurrentUser');
+const checkForUserData = () => {
+      if (!currentUser.value) {
+        userManagement.getUsers();
+        global.getCurrentUser();
       }
-    },
-    checkIfInPhypStandby(checkCounter = 0) {
+    };
+const checkIfInPhypStandby = (checkCounter = 0) => {
       checkCounter++;
       if (checkCounter > 15) return;
-      if (!this.isInPhypStandby) {
-        this.$store.dispatch('global/getBootProgress');
+      if (!isInPhypStandby.value) {
+        global.getBootProgress();
         setTimeout(() => {
-          this.checkIfInPhypStandby(checkCounter);
+          checkIfInPhypStandby(checkCounter);
         }, 60000);
       }
-    },
-    updateDumpInfo() {
-      this.$emit('updateDumpInfo', this.selectedDumpType);
-    },
-    handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
+    };
+const updateDumpInfo = () => {
+  nextTick(() => {
+    // console.log('selectedDumpType.value after nextTick:', selectedDumpType.value);
+    eventBus.emit('updateDumpInfo', selectedDumpType.value);
+  });
+    };
+const handleSubmit = () => {
+    // console.log('under handle submit', v$.value.$touch());
+    // console.log('selectedDumpType', selectedDumpType.value);
+      v$.value.$touch();
+      if (v$.value.$invalid) return;
 
-      const dumpType = this.$t(`pageDumps.form.${this.selectedDumpType}Dump`);
+      const dumpType = i18n.global.t(`pageDumps.form.${selectedDumpType.value}Dump`);
 
-      if (this.selectedDumpType === 'system') {
+      if (selectedDumpType.value === 'system') {
         // System dump initiation
-        this.showConfirmationModal();
+        showConfirmationModal();
       }
       // Resource dump initiation
-      else if (this.selectedDumpType === 'resource') {
-        this.$store
-          .dispatch('dumps/createResourceDump', {
+      else if (selectedDumpType.value === 'resource') {
+        dumps.createResourceDump({
             dumpType: dumpType,
-            resourceSelector: this.resourceSelectorValue,
+            resourceSelector: resourceSelectorValue.value,
             // If not logged as service, '' must be used
-            resourcePassword: this.resourcePassword || '',
+            resourcePassword: resourcePassword.value || '',
           })
-          .then(() =>
-            this.infoToast(this.$t('pageDumps.toast.successStartDump'), {
-              title: this.$t('pageDumps.toast.successStartResourceDumpTitle'),
+          .then(() => {
+            infoToast(i18n.global.t('pageDumps.toast.successStartDump'), {
+              title: i18n.global.t('pageDumps.toast.successStartResourceDumpTitle'),
               timestamp: true,
-            }),
-          )
-          .catch(({ message }) => this.errorToast(message));
+            });
+            checkTask();
+          })
+          .catch(({ message }) => errorToast(message));
       }
       // BMC dump initiation
-      else if (this.selectedDumpType === 'bmc') {
-        this.$store
-          .dispatch('dumps/createBmcDump', dumpType)
+      else if (selectedDumpType.value === 'bmc') {
+        dumps.createBmcDump(dumpType)
           .then(() =>
-            this.infoToast(this.$t('pageDumps.toast.successStartDump'), {
-              title: this.$t('pageDumps.toast.successStartBmcDumpTitle'),
+            infoToast(i18n.global.t('pageDumps.toast.successStartDump'), {
+              title: i18n.global.t('pageDumps.toast.successStartBmcDumpTitle'),
               timestamp: true,
-            }),
+            })
           )
-          .catch(({ message }) => this.errorToast(message));
-      } else if (this.selectedDumpType === 'partition') {
+          .catch(({ message }) => errorToast(message));
+      } else if (selectedDumpType.value === 'partition') {
         // Partition dump initiation
-        this.showPartitionDumpConfirmationModal();
-      } else if (this.selectedDumpType === 'retryPartition') {
+        showPartitionDumpConfirmationModal();
+      } else if (selectedDumpType.value === 'retryPartition') {
         // Retry partition dump
-        this.showPartitionDumpConfirmationModal();
+        showPartitionDumpConfirmationModal();
       }
-    },
-    setDumpTypeOptions() {
+    };
+const setDumpTypeOptions = () => {
       let minimumOptions = [
-        { value: 'bmc', text: this.$t('pageDumps.form.bmcDump') },
-        { value: 'resource', text: this.$t('pageDumps.form.resourceDump') },
-        { value: 'system', text: this.$t('pageDumps.form.systemDump') },
+        { value: 'bmc', text: i18n.global.t('pageDumps.form.bmcDump') },
+        { value: 'resource', text: i18n.global.t('pageDumps.form.resourceDump') },
+        { value: 'system', text: i18n.global.t('pageDumps.form.systemDump') },
       ];
-      this.dumpTypeOptions = [];
-      if (this.hmcInfo === 'Enabled') {
-        return (this.dumpTypeOptions = minimumOptions);
-      } else if (this.isIBMi) {
-        return (this.dumpTypeOptions = [
+      dumpTypeOptions.value = [];
+      if (hmcInfo.value === 'Enabled') {
+        return (dumpTypeOptions.value = minimumOptions);
+      } else if (isIBMi.value) {
+        return (dumpTypeOptions.value = [
           ...minimumOptions,
           {
             value: 'partition',
-            text: this.$t('pageDumps.form.partitionDump'),
+            text: i18n.global.t('pageDumps.form.partitionDump'),
           },
           {
             value: 'retryPartition',
-            text: this.$t('pageDumps.form.retryPartitionDump'),
+            text: i18n.global.t('pageDumps.form.retryPartitionDump'),
           },
         ]);
       } else {
-        return (this.dumpTypeOptions = minimumOptions);
+        return (dumpTypeOptions.value = minimumOptions);
       }
-    },
-    exceuteFunction(value) {
-      this.$store
-        .dispatch('ibmiServiceFunctions/executeServiceFunction', value)
+    };
+const exceuteFunction = (value) => {
+      ibmiServiceFunctions.executeServiceFunction(value)
         .then((message) => {
-          this.infoToast(
-            this.$t('pageDumps.toast.successSavePartitionDumpInfo'),
+          infoToast(
+            i18n.global.t('pageDumps.toast.successSavePartitionDumpInfo')
           );
-          this.successToast(message);
+          successToast(message);
         })
-        .catch(({ message }) => this.errorToast(message));
-    },
-    isFunctionDisabled(value) {
+        .catch(({ message }) => errorToast(message));
+    };
+const isFunctionDisabled = (value) => {
       // This condition is to check if the function is available to execute
-      if (this.availableFunctions.includes(value)) {
+      if (availableFunctions.value.includes(value)) {
         return false;
       } else {
         return true;
       }
-    },
-    showConfirmationModal() {
-      this.$bvModal.show('modal-confirmation');
-    },
-    showPartitionDumpConfirmationModal() {
-      this.$bvModal.show('modal-partition-dump-confirmation');
-    },
-    createSystemDump(dumpType) {
-      this.$store
-        .dispatch('dumps/createSystemDump', dumpType)
+    };
+const showConfirmationModal = () => {
+      modalConfirmation=True
+      // this.$bvModal.show('modal-confirmation');
+    };
+const showPartitionDumpConfirmationModal = () => {
+      modalPartition=True
+      // this.$bvModal.show('modal-partition-dump-confirmation');
+    };
+const createSystemDump = (dumpType) => {
+      dumps.createSystemDump(dumpType)
         .then(() =>
-          this.infoToast(this.$t('pageDumps.toast.successStartDump'), {
-            title: this.$t('pageDumps.toast.successStartSystemDumpTitle'),
+          infoToast(i18n.global.t('pageDumps.toast.successStartDump'), {
+            title: i18n.global.t('pageDumps.toast.successStartSystemDumpTitle'),
             timestamp: true,
-          }),
+          })
         )
-        .catch(({ message }) => this.errorToast(message));
-    },
-  },
-};
+        .catch(({ message }) => errorToast(message));
+    };
 </script>
diff --git a/src/views/Logs/Dumps/DumpsModalConfirmation.vue b/src/views/Logs/Dumps/DumpsModalConfirmation.vue
index f8e20cfd55..d6d1a7ec13 100644
--- a/src/views/Logs/Dumps/DumpsModalConfirmation.vue
+++ b/src/views/Logs/Dumps/DumpsModalConfirmation.vue
@@ -1,5 +1,6 @@
 <template>
-  <b-modal
+  <BModal
+    v-model="modal"
     id="modal-confirmation"
     ref="modal"
     :title="$t('pageDumps.modal.initiateSystemDump')"
@@ -17,59 +18,63 @@
       <status-icon status="danger" />
       {{ $t('pageDumps.modal.initiateSystemDumpMessage3') }}
     </p>
-    <b-form-checkbox v-model="confirmed" @input="$v.confirmed.$touch()">
+    <BFormCheckbox v-model="confirmed" @input="v$.confirmed.$touch()">
       {{ $t('pageDumps.modal.initiateSystemDumpMessage4') }}
-    </b-form-checkbox>
-    <b-form-invalid-feedback
-      :state="getValidationState($v.confirmed)"
+    </BFormCheckbox>
+    <BFormInvalidFeedback
+      :state="getValidationState(v$.confirmed)"
       role="alert"
     >
       {{ $t('global.form.required') }}
-    </b-form-invalid-feedback>
+    </BFormInvalidFeedback>
     <template #modal-footer="{ cancel }">
-      <b-button variant="secondary" @click="cancel()">
+      <BButton variant="secondary" @click="cancel()">
         {{ $t('global.action.cancel') }}
-      </b-button>
-      <b-button variant="danger" @click="handleSubmit">
+      </BButton>
+      <BButton variant="danger" @click="handleSubmit">
         {{ $t('pageDumps.form.initiateDump') }}
-      </b-button>
+      </BButton>
     </template>
-  </b-modal>
+  </BModal>
 </template>
 
-<script>
-import StatusIcon from '@/components/Global/StatusIcon';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+<script setup>
+import { ref, computed, nextTick } from 'vue';
+import StatusIcon from '@/components/Global/StatusIcon.vue';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
+import { useVuelidate } from '@vuelidate/core';
+import eventBus from '@/eventBus';
 
-export default {
-  components: { StatusIcon },
-  mixins: [VuelidateMixin],
-  data() {
-    return {
-      confirmed: false,
-    };
-  },
-  validations: {
+const { getValidationState } = useVuelidateComposable();
+
+const confirmed = ref(false);
+const modal = ref(false);
+
+const mustBeTrue = (value) => {
+  return value === true;
+}
+
+const rules = computed(() => ({
     confirmed: {
-      mustBeTrue: (value) => value === true,
+      mustBeTrue
     },
-  },
-  methods: {
-    closeModal() {
-      this.$nextTick(() => {
-        this.$refs.modal.hide();
+  }));
+const v$ = useVuelidate(rules, { confirmed });
+
+const closeModal = () => {
+      nextTick(() => {
+        modal.value=false
       });
-    },
-    handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.$emit('ok');
-      this.closeModal();
-    },
-    resetForm() {
-      this.confirmed = false;
-      this.$v.$reset();
-    },
-  },
+    };
+const handleSubmit = () => {
+      v$.value.$touch();
+      if ( v$.value.$invalid) return;
+      eventBus.emit('ok');
+      closeModal();
+    };
+const resetForm = () => {
+      confirmed.value = false;
+      v$.value.$reset();
 };
+
 </script>
diff --git a/src/views/Logs/Dumps/DumpsPartitionModalConfirmation.vue b/src/views/Logs/Dumps/DumpsPartitionModalConfirmation.vue
index 00b241bc6a..a3bbc0970b 100644
--- a/src/views/Logs/Dumps/DumpsPartitionModalConfirmation.vue
+++ b/src/views/Logs/Dumps/DumpsPartitionModalConfirmation.vue
@@ -1,5 +1,6 @@
 <template>
-  <b-modal
+  <BModal
+    v-model="modal"
     id="modal-partition-dump-confirmation"
     ref="modal"
     :title="
@@ -18,65 +19,70 @@
       <status-icon status="danger" />
       {{ $t('pageDumps.modal.initiatePartitionDumpMessage1') }}
     </p>
-    <b-form-checkbox v-model="confirmed" @input="$v.confirmed.$touch()">
+    <BFormCheckbox v-model="confirmed" @input="v$.confirmed.$touch()">
       {{ $t('pageDumps.modal.initiatePartitionDumpMessage2') }}
-    </b-form-checkbox>
-    <b-form-invalid-feedback
-      :state="getValidationState($v.confirmed)"
+    </BFormCheckbox>
+    <BFormInvalidFeedback
+      :state="getValidationState(v$.confirmed)"
       role="alert"
     >
       {{ $t('global.form.required') }}
-    </b-form-invalid-feedback>
+    </BFormInvalidFeedback>
     <template #modal-footer="{ cancel }">
-      <b-button variant="secondary" @click="cancel()">
+      <BButton variant="secondary" @click="cancel()">
         {{ $t('global.action.cancel') }}
-      </b-button>
-      <b-button variant="danger" @click="handleSubmit">
+      </BButton>
+      <BButton variant="danger" @click="handleSubmit">
         {{ $t('pageDumps.form.initiateDump') }}
-      </b-button>
+      </BButton>
     </template>
-  </b-modal>
+  </BModal>
 </template>
 
-<script>
-import StatusIcon from '@/components/Global/StatusIcon';
-import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
+<script setup>
+import { ref, computed, nextTick } from 'vue';
+import StatusIcon from '@/components/Global/StatusIcon.vue';
+import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
+import { useVuelidate } from '@vuelidate/core';
+import eventBus from '@/eventBus';
 
-export default {
-  components: { StatusIcon },
-  mixins: [VuelidateMixin],
-  props: {
+const { getValidationState } = useVuelidateComposable();
+
+defineProps({
     selected: {
       type: String,
       required: true,
     },
-  },
-  data() {
-    return {
-      confirmed: false,
-    };
-  },
-  validations: {
+  });
+
+const confirmed = ref(false);
+const modal = ref(false);
+
+const mustBeTrue = (value) => {
+      return value === true;
+}
+
+const rules = computed(() => ({
     confirmed: {
-      mustBeTrue: (value) => value === true,
+      mustBeTrue
     },
-  },
-  methods: {
-    closeModal() {
-      this.$nextTick(() => {
-        this.$refs.modal.hide();
+  }));
+const v$ = useVuelidate(rules, { confirmed });
+
+const closeModal = () => {
+      nextTick(() => {
+        modal.value=false;
       });
-    },
-    handleSubmit() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.$emit('ok');
-      this.closeModal();
-    },
-    resetForm() {
-      this.confirmed = false;
-      this.$v.$reset();
-    },
-  },
-};
+    };
+const handleSubmit = () => {
+      v$.value.$touch();
+      if (v$.value.$invalid) return;
+      eventBus.emit('ok');
+      closeModal();
+    };
+const resetForm = () => {
+      confirmed.value = false;
+      v$.value.$reset();
+    };
+
 </script>