Fix: Usar toRaw() para convertir Proxies de Vue antes de guardar en IndexedDB

- Usar toRaw() + JSON.parse/stringify para deep clone sin Proxies
- No modificar modificadoEn en objeto reactivo, solo en copia
- Evitar re-renderizados innecesarios manteniendo referencias estables

nuxt4/app/composables/useIndexedDB.ts

@@ -49,9 +49,11 @@ function openDatabase(): Promise<IDBDatabase> {
  */
 async function saveSession(sesion: SesionCatacion): Promise<void> {
   try {
-    // Clonar la sesión para eliminar los proxies reactivos de Vue
-    // antes de guardar en IndexedDB
-    const sesionClonada = JSON.parse(JSON.stringify(sesion)) as SesionCatacion
+    // Usar toRaw para convertir proxies reactivos de Vue a objetos planos
+    // antes de guardar en IndexedDB, pero necesitamos clonar profundamente
+    // para evitar referencias a objetos reactivos
+    const { toRaw } = await import('vue')
+    const sesionPlana = JSON.parse(JSON.stringify(toRaw(sesion))) as SesionCatacion
 
     const db = await openDatabase()
     const transaction = db.transaction([STORE_NAME], 'readwrite')
@@ -66,7 +68,7 @@ async function saveSession(sesion: SesionCatacion): Promise<void> {
 
     // Guardar la nueva sesión
     await new Promise<void>((resolve, reject) => {
-      const addRequest = objectStore.add(sesionClonada)
+      const addRequest = objectStore.add(sesionPlana)
       addRequest.onsuccess = () => resolve()
       addRequest.onerror = () => reject(new Error('Error al guardar la sesión'))
     })
@@ -216,19 +218,21 @@ async function deleteSession(): Promise<void> {
  */
 async function updateSession(sesion: SesionCatacion): Promise<void> {
   try {
-    // Actualizar timestamp de modificación
-    sesion.modificadoEn = Date.now()
+    // Usar toRaw para convertir proxies reactivos de Vue a objetos planos
+    // antes de guardar en IndexedDB, pero necesitamos clonar profundamente
+    // para evitar referencias a objetos reactivos
+    const { toRaw } = await import('vue')
+    const sesionPlana = JSON.parse(JSON.stringify(toRaw(sesion))) as SesionCatacion
 
-    // Clonar la sesión para eliminar los proxies reactivos de Vue
-    // antes de guardar en IndexedDB
-    const sesionClonada = JSON.parse(JSON.stringify(sesion)) as SesionCatacion
+    // Actualizar timestamp solo en la copia, no en el objeto reactivo
+    sesionPlana.modificadoEn = Date.now()
 
     const db = await openDatabase()
     const transaction = db.transaction([STORE_NAME], 'readwrite')
     const objectStore = transaction.objectStore(STORE_NAME)
 
     await new Promise<void>((resolve, reject) => {
-      const putRequest = objectStore.put(sesionClonada)
+      const putRequest = objectStore.put(sesionPlana)
       putRequest.onsuccess = () => resolve()
       putRequest.onerror = () => reject(new Error('Error al actualizar la sesión'))
     })