Change in component only gets reflected in last component (HMR)

[LukasHechenbergerID]

Related plugins

• plugin-vue

• plugin-vue-jsx

Describe the bug

If you change something in a component and use it multiple times (v-for or just multiple components) only the last one gets updated. When you reload the site, all components are correctly updated. When you change something, there is a correct HMR update in the console.

Observation: If there is only one div (so no nested elements) it works.

Reproduction

https://stackblitz.com/edit/vitejs-vite-nvdtpq?file=src/components/TestCard.vue

Steps to reproduce

Change Text in TestCard.vue. Only the last TestCard component will be updated

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H
    Memory: 1.97 GB / 15.68 GB
  Binaries:
    Node: 18.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1413.0), Chromium (111.0.1661.44)
    Internet Explorer: 11.0.22621.1

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.

[danielroe]

Linking for context: vitejs/vite#9679

[sapphi-red]

I guess this is same with vuejs/core#7138.
If you replace x.vue in the reproduction with below, you'll get a similar result.

<template>
  <div>
    <p class="m-0">Best blog about</p>
  </div>
</template>

[sapphi-red]

I confirmed that this is fixed in Vue 3.3.7.