Describe the bug

While creating table component with vue using @tanstack/table I realized that the tanstack table doesn't play well with reactivity using

useVueTable({
    [...]
    get data() {
        return props.data
    },
})

If you change the contents of props.data (like push a new element) it's perfectly fine for the vue reactivity model. Even the data() function does get reexcecuted - so I'm guessing that the memo() function in the utils of tanstack table decides that props.data did not actually change and it won't get propagated to the row model. See the codesandbox attached, which will make the issue clear I think.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/busy-browser-61p7of?welcome=true

Steps to reproduce

1. Use a reactive array in get data() when setting up the table with useVueTable
2. Push a new element to that array
3. Realize that it gets properly updated if i.e. just rendered on the template
4. Realize that no new row is displayed in the table (table.getRowModel()) returns old data

Expected behavior

I'd like to harmonize vue reactivity with the tanstack reactivity at this point.

I can workaround this issue by copying the data before using it in data() - but that'd create an unnecessary extra copy step:

const data = computed(() => {
  return [...props.data];
});

const table = useVueTable<RowData>({
  get data() {
    return data.value;
  },
});

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

OS: Windows11 with WSL2 on Ubuntu 22.04
Browser: FF 113

react-table version

8.7.9

TypeScript version

5.0.4

Additional context

No response

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.