codex es otro pedo, lo soluciono

nuxt4/app/components/lotes/Table.vue

@@ -41,38 +41,36 @@
 
     <UCard>
       <UTable
-        v-model="selected"
+        :data="lotes"
-        :rows="lotes"
         :columns="columns"
         :loading="loading"
         :empty-state="{
           icon: 'i-heroicons-inbox',
           label: 'No hay lotes registrados'
         }"
-        @select="handleSelect"
       >
-        <template #codigo-data="{ row }">
+        <template #codigo-cell="{ row }">
           <span class="font-mono font-semibold">{{ row.codigo || '-' }}</span>
         </template>
 
-        <template #tipo-data="{ row }">
+        <template #tipo-cell="{ row }">
           <UBadge :color="getTipoColor(row.tipo)" variant="subtle">
             {{ getTipoLabel(row.tipo) }}
           </UBadge>
         </template>
 
-        <template #cantidad_kg-data="{ row }">
+        <template #cantidad_kg-cell="{ row }">
           <span v-if="row.cantidad_kg" class="font-medium">
             {{ row.cantidad_kg.toLocaleString('es-AR') }} kg
           </span>
           <span v-else class="text-gray-400">-</span>
         </template>
 
-        <template #fecha_creado-data="{ row }">
+        <template #fecha_creado-cell="{ row }">
           {{ formatDate(row.fecha_creado) }}
         </template>
 
-        <template #actions-data="{ row }">
+        <template #actions-cell="{ row }">
           <div class="flex gap-1">
             <UButton
               icon="i-heroicons-eye"
@@ -101,6 +99,7 @@
 </template>
 
 <script setup lang="ts">
+import type { ColumnDef } from '@tanstack/vue-table'
 import type { Lote } from '~/composables/useLotes'
 
 console.log('🟢 LotesTable: <script setup> ejecutándose')
@@ -118,16 +117,15 @@ console.log('🟢 LotesTable: useLotes() completado')
 
 const lotes = ref<Lote[]>([])
 const loading = ref(false)
-const selected = ref<Lote[]>([])
 const filtroTipo = ref('')
 const error = ref<string | null>(null)
 
-const columns = [
+const columns: ColumnDef<Lote>[] = [
-  { key: 'codigo', label: 'Código' },
+  { accessorKey: 'codigo', id: 'codigo', header: 'Código' },
-  { key: 'tipo', label: 'Tipo' },
+  { accessorKey: 'tipo', id: 'tipo', header: 'Tipo' },
-  { key: 'cantidad_kg', label: 'Cantidad' },
+  { accessorKey: 'cantidad_kg', id: 'cantidad_kg', header: 'Cantidad' },
-  { key: 'fecha_creado', label: 'Fecha Creación' },
+  { accessorKey: 'fecha_creado', id: 'fecha_creado', header: 'Fecha Creación' },
-  { key: 'actions', label: 'Acciones' },
+  { id: 'actions', header: 'Acciones' },
 ]
 
 const loadLotes = async () => {
@@ -152,10 +150,6 @@ const loadLotes = async () => {
   }
 }
 
-const handleSelect = (rows: Lote[]) => {
-  selected.value = rows
-}
-
 const getTipoLabel = (tipo: string) => {
   const found = TIPOS_LOTE.find((t) => t.value === tipo)
   return found?.label || tipo

nuxt4/app/components/operaciones/Table.vue

@@ -41,7 +41,7 @@
 
     <UCard>
       <UTable
-        :rows="operaciones"
+        :data="operaciones"
         :columns="columns"
         :loading="loading"
         :empty-state="{
@@ -49,7 +49,7 @@
           label: 'No hay operaciones registradas'
         }"
       >
-        <template #tipo-data="{ row }">
+        <template #tipo-cell="{ row }">
           <div class="flex items-center gap-2">
             <UIcon :name="getTipoIcon(row.tipo)" class="w-4 h-4" />
             <UBadge :color="getTipoColor(row.tipo)" variant="subtle">
@@ -58,11 +58,11 @@
           </div>
         </template>
 
-        <template #fecha-data="{ row }">
+        <template #fecha-cell="{ row }">
           {{ formatDate(row.fecha) }}
         </template>
 
-        <template #actions-data="{ row }">
+        <template #actions-cell="{ row }">
           <div class="flex gap-1">
             <UButton
               icon="i-heroicons-eye"
@@ -78,6 +78,7 @@
 </template>
 
 <script setup lang="ts">
+import type { ColumnDef } from '@tanstack/vue-table'
 import type { Operacion } from '~/composables/useLotes'
 
 console.log('🟡 OperacionesTable: <script setup> ejecutándose')
@@ -96,11 +97,11 @@ const loading = ref(false)
 const filtroTipo = ref('')
 const error = ref<string | null>(null)
 
-const columns = [
+const columns: ColumnDef<Operacion>[] = [
-  { key: 'tipo', label: 'Tipo de Operación' },
+  { accessorKey: 'tipo', id: 'tipo', header: 'Tipo de Operación' },
-  { key: 'fecha', label: 'Fecha' },
+  { accessorKey: 'fecha', id: 'fecha', header: 'Fecha' },
-  { key: 'lugar_id', label: 'Lugar' },
+  { accessorKey: 'lugar_id', id: 'lugar_id', header: 'Lugar' },
-  { key: 'actions', label: 'Acciones' },
+  { id: 'actions', header: 'Acciones' },
 ]
 
 const loadOperaciones = async () => {