Nuxt UI Table disappears when using mutable field ref()

<template>
  <div>
    <h1>Example using ref</h1>
    <UTable :data="products" :loading="productsLoading" class="flex-1 max-h-[312px]" />
    {{ products }}
    <h1>Example using static data</h1>
    <UTable :data="[
      { name: 'Product 1', price: '$10', description: 'Description of Product 1' },
      { name: 'Product 2', price: '$20', description: 'Description of Product 2' },
      { name: 'Product 3', price: '$30', description: 'Description of Product 3' }
    ]" class="flex-1 max-h-[312px]" />
  </div>
</template>
<script lang="ts" setup>
definePageMeta({
  middleware: ['auth']
})

const toast = useToast()
const products = ref()
const productsLoading = ref(true)

async function initProducts() {
  try {
    productsLoading.value = true
    let resp = await $fetch('/api/staff/products', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    })
    console.log('Products response:', JSON.stringify(resp))
    products.value = JSON.parse(JSON.stringify(resp)).items
    console.log('Products fetched:', products.value)
  } catch (error) {
    toast.add({
      title: 'Error fetching products',
      description: 'There was an error fetching the products. Please try again later.',
      color: 'error'
    })
  } finally {
    productsLoading.value = false
  }

}

if (import.meta.client) {
  initProducts()
}

</script>