Contexto: tengo una función en mi enlace "montado ()" que alterna una variable booleana (nodo del cajón) en una acción de clic. El valor actualizado de esta variable debe pasarse a un componente secundario como accesorio.

Problema: cuando hago clic en una burbuja en el gráfico para alternar el valor del nodo del cajón, obtengo "en el gráfico: verdadero" en mi consola. Entonces, la función en el gráfico para alternar el valor parece funcionar. Por otro lado, no obtengo nada de mi observador. También coloqué otro observador en el componente secundario para ver si el valor de los accesorios del nodo del cajón está pasando. Lo mismo sucede, el observador no se activa porque no detecta los cambios de valor, el valor pasado de DrawNode sigue siendo "falso" en lugar de "verdadero".

Parece que el valor de drawNode solo cambia localmente dentro de mi gráfico por alguna razón.

Restricciones: el código dentro de "mounted()" debe permanecer igual.

Gracias de antemano por cualquier peice de consejo

El componente principal se ve así:

 <template> <div class="col" style="position: absolute; width:100%; height:100%" > <NodeDrawer :drawerNode="drawerNode"/> <div class="main-map-container" style="overflow: hidden; width: 100%;"> <div ref="graph" class="canvas"> </div> </div> </div> </template> <script> import NodeDrawer from '../components/NodeDrawer.vue' export default { components: {NodeDrawer}, setup(){ }, methods: { createGraph(){ // in my createGraph function , I have this on click method that will toggle // drawerNode to true/false when user clicks on the graph's bubbles. .on("click", function() { this.drawerNode = !this.drawerNode console.log(" in graph : ",this.drawerNode) }) ;} }, watch: { drawerNode: function(){ console.log('in watch : ', this.drawerNode) }, }, mounted() { const svgobj = this.createGraph() this.$refs.graph.appendChild(svgobj) }, data() { return { drawerNode: false }} } </script> <style> </style>