Un `watch` dispara llamadas duplicadas al backend: ¿cómo lo depurarías?

Respuesta

• Haz un mapa de todos los disparadores: onMounted, watch con immediate, cambios de ruta, props y acciones del usuario.
• Unifica el fetch en una sola entrada cuando sea posible y usa debounce o cancelación para evitar que varias ramas lancen la misma petición.
• Después deja un test o un log visible que pruebe que cada interacción genera una sola llamada esperada.

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

export function useUserSearch() {
  const query = ref("");
  const results = ref<User[]>([]);

  watch(query, async (value, _, onCleanup) => {
    const controller = new AbortController();
    onCleanup(() => controller.abort());
    results.value = await fetchUsers(value, controller.signal);
  });
}

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.