Table rows dont get deleted / unmounted when data changes

[MickL]

Version

v3 latest commit

Description

I noticed the following behavior:

• When the data prop of a <UTable> changes, the rows dont get properly unmounted
• This results in components within a row to never have unMounted being called (only if the amount of rows is less for the ones that get removed)
• Further this can result in a bugs and unexpected behavior because for components only the props change but the setup function is not called again

Reproduction

Consider the following simplified example. The badge never changes color. Also if one would use onMounted/onUnmounted within the badge component they would not get triggered when the data changes (only if the amount of rows change).

my-badge.vue

<script setup lang="ts">
const props = defineProps<{
  status: 'yes' | 'no';
}>();

switch (props.status) {
  case 'yes':
    color = 'success';
    break;
  case 'no':
    color = 'error';
    break;
}
</script>

<template>
   <UBadge :color variant="subtle">{{ props.status }}</UBadge>
</template>

my-table.vue

<script setup lang="ts">
   const page = ref(1);
   const { data } = useFetch('url', { query: { page }}); // This gets refetched when `page.value` changes
</script>

<template>
  <UTable :data :columns>
     <template #status-cell="{ row }">
          <MyBadge :status="row.original.status" />
      </template>
  </UTable>
</template>

Additional context

I think this was already the case within v2: There I have a table that contains <NuxtImg /> tags. When the data changes (e.g. by pagination) the new rows are displayed with the images of the old row until the new images are loaded. That is probably because the <NuxtImg /> components dont get removed and replaced by all new ones.

Let me know if I should create a reproduction repo