custom vue data table component

import { valueUpdater } from "~/lib/utils";
const {
  columnFilters: _columnFilters = [],
  globalFilter: _globalFilter,
  data,
  columns,
} = defineProps<{
  columns: ColumnDef<TData, TValue>[];
  data: TData[];
  columnFilters?: ColumnFiltersState;
  globalFilter?: string;
}>();
const columnFilters = toRef(() => _columnFilters);
const globalFilter = toRef(() => _globalFilter);
const table = useVueTable({
  get data() {
    return data;
  },
  get columns() {
    return columns;
  },
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  onColumnFiltersChange: (updaterOrValue) =>
    valueUpdater(updaterOrValue, columnFilters),
  onGlobalFilterChange: (updaterOrValue) =>
    valueUpdater(updaterOrValue, globalFilter),
  state: {
    get columnFilters() {
      return columnFilters.value;
    },
    get globalFilter() {
      return globalFilter.value;
    },
  },
});