Cazando tooltips fantasma: cómo un bug de i18n nos enseñó sobre reactividad en Vue
Hoy debugueamos un problema molesto en Hezu donde los tooltips no se actualizaban al cambiar idioma. La solución tocó reactivity de Vue y nos recordó por qué los detalles importan.
El problema: tooltips que no escuchaban
En Hezu teníamos un caso incómodo: cuando un usuario cambiaba de idioma, todo se actualizaba menos los tooltips. El contenido se quedaba en el idioma anterior como si hubiera un caché invisible bloqueando la reactividad.
Qué pasaba bajo el capó
El bug estaba en cómo los tooltips manejaban las cadenas traducidas. Resulta que estábamos bindeando el texto en un atributo que no era reactivo en el contexto donde vivía el componente tooltip. Vue no tenía forma de saber que la dependencia del i18n había cambiado porque la referencia estaba "congelada" en el ciclo de vida del tooltip.
La solución
La fix fue simple pero reveladora: forzar la reactividad en el binding del tooltip asegurándonos de que cualquier cambio en la clave de traducción triggeara una re-evaluación. No fue un hack, fue entender que en Vue el contexto reactivo es rey.
Pequeño detalle que vale la pena: estos bugs de i18n suelen esconderse bien porque funcionan en desarrollo con hot reload. Lo vemos en producción cuando alguien realmente cambia idioma.