different behavior in development vs production build

[stefanprobst]

Vue version

3.2.39

Link to minimal reproduction

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

Steps to reproduce

• navigate to /first-page and see a <circle> element rendered
• click on the link to "Second page" in the page header, and then click on the link to "First page" in the page header

What is expected?

only one <circle> element is rendered

What is actually happening?

• in a development build, only one <circle> element is rendered, which is the behavior i expected. it is also the behavior in vue@2 with options api (see the options-api branch in the minimal reproduction).
• in a production build however, all previously rendered <circle> elements remain visible.

System Info

System:
    OS: Linux 5.15 KDE neon 5.25
    CPU: (4) x64 Intel(R) Core(TM) i5-4590 CPU @ 3.30GHz
    Memory: 10.73 GB / 15.54 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.17.0 - ~/.volta/tools/image/node/16.17.0/bin/node
    Yarn: 1.22.19 - ~/.volta/tools/image/yarn/1.22.19/bin/yarn
    npm: 8.15.0 - ~/.volta/tools/image/node/16.17.0/bin/npm
  Browsers:
    Chrome: 105.0.5195.102
    Firefox: 104.0
    Firefox Nightly: 106.0a1
  npmPackages:
    vue: ^3.2.37 => 3.2.39 

Any additional comments?

x-ref: #6717