different behavior in development vs production build

[stefanprobst]

when manually adding elements with d3 i am seeing different results in a "development build" vs a "production build". why?

minimal repro: two pages, both render a <test-svg>, which adds a <circle>. in a development build, the added <circle> elements are removed when switching between pages (which is the behavior i want), but in a production build all previously added <circle> elements remain visible.

repo: https://github.com/stefanprobst/vue-d3-issue

<script lang="ts" setup>
import { select } from "d3";
import { onMounted } from "vue";

onMounted(() => {
  const colors = ["dodgerblue", "tomato", "orange"];
  
  select("#graph")
    .append("circle")
    .attr("fill", colors[Math.floor(Math.random() * colors.length)])
    .attr("cx", Math.floor(Math.random() * 300))
    .attr("cy", Math.floor(Math.random() * 150))
    .attr("r", 50);
});
</script>

<template>
  <svg id="graph-container"><g id="graph"></g></svg>
</template>

<!-- first-page.vue and second-page.vue -->
<script lang="ts" setup>
import TestSvg from "@/components/test-svg.vue";
</script>

<template>
  <main><test-svg /></main>
</template>

do i need to clean something up somewhere?

[stefanprobst]

i also tried the same with vue@2 and it works correctly, so maybe this is a bug? see the options-api branch in the repro above.

[LinusBorg]

Please open an isue for this.

[stefanprobst]

thanks, opened #6727