Describe the bug

I have a custom element test-component with a value prop defined which I want to use in a Vue template like this: <test-component value="input A"></test-component>. Vue sees that it has a value prop, so it sets this instead of an attribute. In the dev tools, you can see it didn't set an attribute, but the property directly. This works as expected. However, if it gets unmounted by rendering something else and then gets remounted, the prop will not be set. This only happens in the production build (npm run build + npm run preview), and not with the dev server (npm run dev).

Initial (show input A):

After pressing "toggle" (show input B):

After pressing "toggle" again (show input A):

This is not an issue if the property of the custom element gets reflected back to an attribute. But this is not always the case, for example with props that could change a lot, like value or currentTime.

It's also not an issue when using a ref as a value for the prop.

I have found a workaround by using a unique key for each custom element like this: <test-component value="input A" :key="input-a"></test-component>, but this is hard to explain to other devs why this is needed.

I can't reproduce it with the Vue CLI (Webpack) production build, so that's why I think it's a Vite + Vue plugin issue. I can't try to reproduce it on https://sfc.vuejs.org/ since it doesn't support allowing custom elements (as far as I know).

It's reproducible with several web component libraries (like Shoelace), as well as in a simple vanilla web component (see reproduction).

Reproduction

https://github.com/elwinvaneede/vue3-vite-ce-production-build-issue

System Info

System:
    OS: macOS 12.5
    CPU: (10) arm64 Apple M1 Pro
    Memory: 321.30 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 103.0.5060.134
    Firefox: 100.0.1
    Safari: 15.6
  npmPackages:
    @vitejs/plugin-vue: ^3.0.0 => 3.0.1
    vite: ^3.0.0 => 3.0.4

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.