I have vue app which displays a rectangle "created" by d3 in a child component

the number of rect created depends on the number of values in data property of the parent
changing the data changes the exisitng rects in the child component

the data gets updated but with the correct number of recs coresponding to the data
what Im trying to do /solve prevent creating a "g" element

only idea so far is to use d3.remove to delete the existing "g" if a update ooccurs and create a new one ,

// 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>