Tengo la aplicación vue que muestra un rectángulo "creado" por d3 en un componente secundario

el número de rect creado depende del número de valores en la propiedad de datos del padre
cambiar los datos cambia los rectángulos existentes en el componente secundario

los datos se actualizan pero con el número correcto de registros correspondientes a los datos
lo que estoy tratando de hacer / resolver evita crear un elemento "g"

La única idea hasta ahora es usar d3.remove para eliminar la "g" existente si se produce una actualización y crear una nueva.

 // parent <template> <child :data="data" /> <button type="button" @click="changeData">click to change</button> </template> <script> import Child from "./components/child.vue"; export default { name: "App", components: { Child, }, data() { return { data: [1], }; }, methods: { changeData() { this.data = [1, 2]; }, }, }; </script> // child <template> <div class="foo"> <svg ref="svgRef"></svg> <h1>I have this prop</h1> </div> </template> <script> import d3 from "@/assets/d3"; import { onMounted, ref, watchEffect } from "@vue/runtime-core"; export default { name: "Circles", props: ["data"], setup(props) { const svgRef = ref(null); onMounted(() => { watchEffect(() => { const selectSvg = d3.select(svgRef.value); selectSvg .selectAll("g") .data(Object.values(props.data)) .join("g") .attr("transform", (d, i) => `translate(60, ${i * 21})`) // use attr instead of style .append("rect") .attr("width", 20 + "px") .attr("height", 20 + "px") .attr("fill", d3.color("orange")); }); }); return { svgRef }; }, }; </script> <style scoped> .limit { max-width: 100px; } </style>