La UI muestra datos viejos aunque el store cambió: ¿cómo localizarías el origen?

Respuesta

• Comprueba primero si la pantalla está leyendo refs vivas del store o una copia local creada en otro momento.
• Revisa escrituras tardías de peticiones anteriores, spread de objetos que rompen identidad y storeToRefs ausentes donde hacían falta.
• Si hay keep-alive o caché, confirma qué rama rehidrata la pantalla al volver y cuál es el último escritor real del dato.

Puntos clave

• Para depurar bien en Vue conviene reducir el problema a una sola causa probable antes de tocar varias piezas a la vez.
• Los bugs más persistentes suelen mezclar asincronía, conservación de componentes y escrituras tardías sobre la misma fuente de verdad.
• Después de arreglar el síntoma hay que dejar una prevención: cleanup explícito, test, log de control o simplificación del flujo.

Errores comunes

• Cambiar varias capas a la vez puede esconder la causa real y hacer que el bug reaparezca con otra forma.
• Sin cleanup, cancelación o control de activación, los mismos problemas suelen volver tras unos cuantos cambios más.

Ejemplo de código

const store = useUsersStore();
const { users, selectedId, pending } = storeToRefs(store);

watch(selectedId, (id) => {
  if (id) void store.loadDetails(id);
});

Ejemplo o caso real

En producción suele emerger tras varias iteraciones, cuando una pantalla ha ido acumulando watchers, fetches, navegación y componentes conservados en caché.

Idea clave

Depurar bien consiste en recortar el problema hasta que solo quede una causa creíble.