Environment

• Operating System: Darwin
• Node Version: v22.14.0
• Nuxt Version: 3.16.2
• CLI Version: 3.24.1
• Nitro Version: 2.11.8
• Package Manager: [email protected]
• Builder: -
• User Config: app, compatibilityDate, devtools, modules, css, runtimeConfig, vuefire
• Runtime Modules: @nuxt/[email protected], [email protected], @pinia/[email protected]
• Build Modules: -

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.0.2

Reproduction

https://codesandbox.io/p/devbox/stupefied-lucy-jmlxr4

Description

Table component is not reactive. Here's a simple example where items are added and removed. The 'num items' is updating in the view. However, the table does not remove nor add items.

<template>
  {{ data.length }} num items
  <UTable :data="data" />
  <UButton label="Delete" @click="deleteItem" />
  <UButton label="Add" @click="addItem" />
</template>

<script setup lang="ts">
function deleteItem() {
  const randomIndex = Math.floor(Math.random() * data.value.length);
  data.value.splice(randomIndex, 1);
}

function addItem() {
  data.value.push({
    id: Math.floor(Math.random() * 10000).toString(),
  });
}

const data = ref([
  {
    id: "4600",
  },
  {
    id: "4599",
  },
  {
    id: "4598",
  },
  {
    id: "4597",
  },
  {
    id: "4596",
  },
]);
</script>

Additional context

No response

Logs