Привязка таблицы к смене статуса из модальных окон

resources/js/Pages/Home/DataTable/Index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {NDataTable, NEllipsis, NTag} from "naive-ui"
-import {computed, h, reactive, ref} from "vue"
+import {computed, h, reactive, ref, watch} from "vue"
 import {useMedicalHistoryFilter} from "../../../Composables/useMedicalHistoryFilter.js";
 import ArchiveHistoryModal from '../ArchiveHistoryModal/Index.vue'
 
@@ -24,6 +24,7 @@ const props = defineProps({
 })
 
 const { isLoading, handlePageChange, handlePageSizeChange, meta, filtersRef } = useMedicalHistoryFilter(props.filters)
+const dataTable = ref(props.data ?? [])
 
 const archiveStatusColumn = (status) => {
     const tagType = status?.variant ?? 'error'
@@ -132,11 +133,30 @@ const pagination = computed(() => {
         }
     }
 })
+
+const onCloseWithoutSave = () => {
+    selectedPatientId.value = null
+}
+
+const onUpdateHistory = ({data, patientId}) => {
+    console.log(data)
+    if (dataTable.value.length > 0) {
+        let needUpdateItem = dataTable.value.findIndex(itm => itm.id === patientId)
+        dataTable.value[needUpdateItem] = {
+            ...dataTable.value[needUpdateItem],
+            status: data.status
+        }
+    }
+}
+
+watch(() => props.data, (newData) => {
+    dataTable.value = newData
+})
 </script>
 
 <template>
-    <NDataTable remote striped :loading="isLoading" :row-props="rowProps" :columns="columns" :pagination="pagination" :max-height="maxHeight" size="small" :min-height="minHeight" :data="data" />
-    <ArchiveHistoryModal v-model:open="showArchiveHistoryModal" :patient-id="selectedPatientId" />
+    <NDataTable remote striped :loading="isLoading" :row-props="rowProps" :columns="columns" :pagination="pagination" :max-height="maxHeight" size="small" :min-height="minHeight" :data="dataTable" />
+    <ArchiveHistoryModal v-model:open="showArchiveHistoryModal" :patient-id="selectedPatientId" @history-updated="onUpdateHistory" @close-without-save="onCloseWithoutSave" />
 </template>
 
 <style scoped>