Vue component don't render properly in dev mode

[oceangravity]

Vue version

3.2.41

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-wbtxfm?file=tailwind.config.cjs,src%2FApp.vue,src%2FNormalComponent.vue,package.json

Steps to reproduce

1. Open stackblitz link and edit App.vue component.
2. Move <NormalComponent /> component bellow the comment <!-- MOVE <NormalComponent /> BELLOW THIS COMMENT -->
3. Now you can see the list is not rendered properly.

Wrong rendered list

Correct rendered list after refresh.

What is expected?

I expect to get the list rendered correctly.

What is actually happening?

List don't render properly after move NormalComponent inside list

Wrong rendered list

System Info

shell
System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-vue: ^3.1.2 => 3.1.2 
    vite: ^3.1.8 => 3.1.8

Any additional comments?

No response

[hoi-lau]

It could be a bug about hmr.

[oceangravity]

I think I've found the bug, when v-for have a empty child, seems HMR doesn't work as expected:

-- Doesn't works when you move <NormalComponent /> component bellow the comment <!-- MOVE <NormalComponent /> BELLOW THIS COMMENT --> link

  <p v-for="item in data" :key="item">
    <div>
       <!-- MOVE <NormalComponent /> BELLOW THIS COMMENT -->
    
    </div>
  </p>

-- But, if the list has no child and move <NormalComponent /> component bellow the comment <!-- MOVE <NormalComponent /> BELLOW THIS COMMENT --> works as expected link

  <p v-for="item in data" :key="item">
       <!-- MOVE <NormalComponent /> BELLOW THIS COMMENT -->
    
  </p>

😌

[zhangzhonghe]

minimal reproduction.

As shown above, the most fundamental reason for this is that the children of each blue div are all equal to the same array due to the red div being hoisted. hmr may cause other elements to be added to the red div, and since the vnode.el corresponding to all red divs is equal to the same value, the newly added elements end up being added to the last red div.

<template>
  <div v-for="item in 3" :key="item" class="blue">
    <div class="red">
    </div>
  </div>
</template>

[hoi-lau]

in this situation, i think we should unmount preVNode, see https://github.com/vuejs/core/pull/6988/files

[oceangravity]

I'm seeing others issues related. If you remove the comment, next remove the empty element inside list, the element keep present in the list and when you undo the change, the element now is duplicated.

reproduction

[javascript-senior]

Same issue here 🤐

[0xMisan]

Months have passed, but there has been no progress.
The same issue still persists. I don't understand why such an obvious issue has not been fixed yet.

[oceangravity]

Months have passed, but there has been no progress.
The same issue still persists. I don't understand why such an obvious issue has not been fixed yet.

There is already a PR for this issue but it needs approval 🫠