Loss of reactivity in UITable

[brycesteve]

Package

v4.x

Description

I have a page based on the pages from Nuxt UI Dashboard template. The data is pulled using useFetch()

I handle sorting/pagination etc server side. Since v4.1.0, the reactivity no longer works. In the dev tools, I can see the props update correctly, but the UITable 'rows' property doesn't update. On UITable I have options set for 'manualSorting', 'manualPaging' etc. The tanStack docs say this is required for server handled data. If I remove these settings, everything works fine, but as the docs say this is required, I'm trying to keep it in. I have worked around the issue by adding a key to UITable. Whenever my data updates, I update the random key, and the table reloads the data. Without the key, everything updates on the page (pagination etc.), just not the actual table rows. This worked fine in Nuxt UI v4.0.1, so obviously something has changed somewhere.

Can anyone please explain if I actually need manualSorting, manualPaging etc., and if I do, why they are now causing the table to not rerender since v4.1.0? If I don't need them, I'll just take them out. But, I'm assuming that TanStack have made a point of saying this for a reason. I'd appreciate any info anyone can provide.

For clarity, it seems to be these lines that are breaking the rendering:

:column-filters-options="{ manualFiltering: true}"
        :sorting-options="{ manualSorting: true }"
        :pagination-options="{ manualPagination: true }"

[MuhammadM1998]

Having the same issue, but the problem for me was using v-model:global-filter, removing it gets the reactivity back

 <UTable
    ref="table"
    v-model:global-filter="search" 
    :data="items"
    :columns
    :initial-state="{ pagination: { pageSize: limit } }"
    :loading
    sticky
 />