Summary: I am working on a Vue.js app where multiple components need to update after a property change triggered by a d3 event dispatch. However, only the last component seems to react.
In my app, there is a component called Loc that contains 23 d3 visualizations in separate Chart components, each of which has 47 data points represented by <a> tags.
Each hover over a <a> tag must trigger a unique Semantic-UI popup defined in a Tip component.
In theory, there should be (47 * 23) instances of the Tip component, but only (47 * 1) are actually being rendered and mounted, despite the existence of 23 instances of the Chart component with a renderComplete function defined in the data.
The structure of the pseudo-app can be visualized like this:
<Loc>
<Chart v-for="...">
<svg :id=uuid></svg>
<div v-if="renderComplete">
<Tip v-for="...">
Each d3 visualization triggers a custom completed event once it finishes rendering.
The issue lies in the fact that while all visualizations render successfully, only the Tip components in the final Chart instance out of 23 are displayed. The first 22 instances fail to render properly. Console output confirms that the event is dispatched and listener executed 23 times as expected.
I have tried various approaches such as making renderComplete a computed property and moving the event listener declaration to the created hook, but without success. Any insights or suggestions would be greatly appreciated. Thanks!