Environment

• Operating System: Windows_NT
• Node Version: v22.13.0
• Nuxt Version: 3.16.0
• CLI Version: 3.23.0
• Nitro Version: 2.11.6
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, modules, css, future, compatibilityDate, runtimeConfig
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], [email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.0

Reproduction

<script setup lang="ts">
const data = ref([
  {
    id: '0',
  },
])

const add = () => {
  data.value.push({
    id: `${data.value.length}`,
  })
  console.log(data.value)
}

</script>

<template>
  <div>
    <UTable :data="data" class="flex-1"/>
    <UButton
        @click="add">Add
    </UButton>
  </div>
</template>

Description

After click the "add" button, it will push a new data into dataRef, but the Table will not rendering new data

Additional context

No response

Logs