Possible synchronization issue in UTable update:row-selection event

[vircoding]

Environment

• Operating System: Windows_NT
• Node Version: v22.19.0
• Nuxt Version: 4.1.2
• CLI Version: 3.30.0
• Nitro Version: 2.12.6
• Package Manager: [email protected]
• Builder: -
• User Config: compatibilityDate, devtools, runtimeConfig, css, modules, routeRules
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

v4.1.0

Reproduction

<script setup lang="ts">
const table = useTemplateRef('table');
const rowSelection = ref<Record<string, boolean>>({});

// data and columns definitions............

function onUpdateRowSelection() {
  // This shows the PREVIOUS state, not the current one
  const immediateSelection = table.value?.tableApi
    .getFilteredSelectedRowModel()
    .rows.map((row) => row.original.id);
  console.log('Immediate Selection ❌: ', immediateSelection); // []

  setTimeout(() => {
    // This shows the CORRECT state, but it's delayed
    const delayedSelection = table.value?.tableApi
      .getFilteredSelectedRowModel()
      .rows.map((row) => row.original.id);
    console.log('Delayed Selection ✔️: ', delayedSelection); // ['962464e7-7b35-4ee6-a555-c839a33d110c']
  }, 5000);
}
</script>

<template>
  <UTable
    ref="table"
    v-model:row-selection="rowSelection"
    :data="data"
    :columns="columns"
    @update:row-selection="onUpdateRowSelection"
  />
</template>

Description

I'm experiencing what appears to be a synchronization issue when using the UTable component with row selection. I'm not entirely sure if this is a bug in the component or if I'm implementing something incorrectly, but I wanted to report it in case others are facing similar problems.

When using the UTable component with v-model:row-selection, there seems to be a timing issue between the update:row-selection event and the internal state of the table. The event appears to be emitted before the internal TanStack Table state is fully updated, which causes inconsistencies when trying to access the currently selected rows immediately after the event fires.

Expected Behavior

1. The internal table state should already be updated.
2. tableApi.getFilteredSelectedRowModel().rows should return the current selection.
3. The table API should be synchronized with the rowSelection ref.

Actual Behavior

1. The update:row-selection event fires before the internal table state updates.
2. tableApi.getFilteredSelectedRowModel().rows returns the previous selection state.
3. The rowSelection ref itself is being updated properly.
4. Accessing the current selection requires using setTimeout or similar workarounds.

This issue is problematic when performing immediate operations on selected rows after selection changes, or using watches that depends on the current selection state.

I'm not sure if I'm using the component incorrectly, if this is indeed a bug, or if it's related to the underlying TanStack Table. Could you please help clarify the intended behavior and whether there's a proper way to access the current selection?

Additional context

No response

Logs

[digidoed]

I also have trouble with the row selection. I didn't investigate it much, just downgraded back to 4.0.1 from 4.1, which solved the problem with that. It seems to be something with the datamodel that does not hold the sorting into account. but that is just a guess without details, which probably won't help you much. Just wanted to inform that I also experiences the bug with row selection in the table, giving a different row (index) than selected.