Un componente no reacciona como esperas tras un cambio de props, slots o `keep-alive`: ¿cómo lo aislarías paso a paso?

Respuesta

• Determina si el componente se recrea, se reutiliza o se reactiva con caché, porque cada caso implica hooks distintos.
• Revisa keys, watchers de props y contenido de slots para ver si el problema está en identidad, en sincronización o en conservación de estado interno.
• Aísla el caso mínimo y decide si la solución correcta es reaccionar a la prop, invalidar la instancia o usar onActivated.

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

<script setup lang="ts">
onActivated(() => restoreScroll());
onDeactivated(() => saveScroll());

watch(() => props.itemId, (id) => {
  void loadItem(id);
}, { immediate: true });
</script>

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.