fix(Table): improve data reactivity (#3967)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/components/Table.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/block-tag-newline -->
 <script lang="ts">
-import type { Ref } from 'vue'
+import type { Ref, WatchOptions } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
 import type { Cell, Header, RowData, TableMeta } from '@tanstack/table-core'
 import type {
@@ -97,6 +97,13 @@ export interface TableProps<T extends TableData> extends TableOptions<T> {
    * @defaultValue 'carousel'
    */
   loadingAnimation?: Table['variants']['loadingAnimation']
+  /**
+   * Use the `watchOptions` prop to customize reactivity (for ex: disable deep watching for changes in your data or limiting the max traversal depth). This can improve performance by reducing unnecessary re-renders, but it should be used with caution as it may lead to unexpected behavior if not managed properly.
+   * @link [API Docs](https://vuejs.org/api/options-state.html#watch)
+   * @link [Guide](https://vuejs.org/guide/essentials/watchers.html)
+   * @defaultValue { deep: true }
+   */
+  watchOptions?: WatchOptions
   /**
    * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/global-filtering#table-options)
    * @link [Guide](https://tanstack.com/table/v8/docs/guide/global-filtering)
@@ -175,7 +182,7 @@ export type TableSlots<T> = {
 </script>
 
 <script setup lang="ts" generic="T extends TableData">
-import { computed, ref } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { Primitive } from 'reka-ui'
 import { upperFirst } from 'scule'
 import { FlexRender, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getExpandedRowModel, useVueTable } from '@tanstack/vue-table'
@@ -184,13 +191,17 @@ import { useAppConfig } from '#imports'
 import { useLocale } from '../composables/useLocale'
 import { tv } from '../utils/tv'
 
-const props = defineProps<TableProps<T>>()
+const props = withDefaults(defineProps<TableProps<T>>(), {
+  watchOptions: () => ({
+    deep: true
+  })
+})
 const slots = defineSlots<TableSlots<T>>()
 
 const { t } = useLocale()
 const appConfig = useAppConfig() as Table['AppConfig']
 
-const data = computed(() => props.data ?? [])
+const data = ref(props.data ?? []) as Ref<T[]>
 const columns = computed<TableColumn<T>[]>(() => props.columns ?? Object.keys(data.value[0] ?? {}).map((accessorKey: string) => ({ accessorKey, header: upperFirst(accessorKey) })))
 const meta = computed(() => props.meta ?? {})
 
@@ -314,6 +325,12 @@ function handleRowSelect(row: TableRow<T>, e: Event) {
   props.onSelect(row, e)
 }
 
+watch(
+  () => props.data, () => {
+    data.value = props.data ? [...props.data] : []
+  }, props.watchOptions
+)
+
 defineExpose({
   tableRef,
   tableApi