`onBeforeUnmount` weird behaviour if the the custom component is on the same DOM tree level.

Vue version

3.3.8

Link to minimal reproduction

https://stackblitz.com/edit/vue3-script-setup-with-vite-l1j4xb?file=src%2FApp.vue

Steps to reproduce

This problem could me my missing knowledge how vnodes and lifecycle hooks working under the hood, but this behaviour is a little bit odd for me because it's working differently with a fresh vite create app and on stackblitz but works differently on SFC Playground.

This is the behaviour on my local env (also on stackblitz):
https://github.com/mateenagy/vue-weird-rerender

• Create a new project with npm create vite@latest my-vue-app -- --template vue-ts
• Create a simple component with some prop and add onBeforeUnmount hook with logging out the props.name for example.
• Use the created component under each other like this:

<div>
    <Test name="foo" />
    <Test name="bar" />
<div>

• Open console in browser then delete the name=foo component
• Browser console will log bar instead of foo

SFC Playground:(https://play.vuejs.org/#eNp9Uk1v2zAM/SuaLnaBwD70ljkB1qHANmBbsQ/0UPXg2rTrViYFSU4DGP7vpeQmTdu0N5GPfHwU3yi/GJNtBpBLWbjKdsYLB34wa4Vdb8h6MQoLjZhEY6kXCZcme+gr9eYpn+UhCEzJZ4UKK0LnRe9asQr9afINtCZxSVbXn5IThUU+j+NBHHjojS49cCREUXeb+OBnHIFlDyslGyIlRX4MuintHiryub/ID1jlQnrHopquze4cIe87hmIlK6bpNNjfxncsWsmliEjAStb88CPmvB1gsctXt1DdH8nfuW3IKXlhwYHdgJJ7zJe2BT/D539/wZbfe7CnetBc/QH4BxzpIWicy84GrFn2QV1U+z2epsP2nzvfekC3WyoIDZVTrFeSTxV+8L3Vn+WeZqexT+HEv7g784FhdIkt38AzwVvzEJ5BQxb+Y08D+gUnfoYH1K88tfOMsWQcu6aGpkO4CFERVYVTL4XzlpdjLeuUXaTwFX+anojVel4j8JGGTFObJleh/XopksU8IQsxM0wvvXjEieMYR4tpOu6s6REggxkW)

The behaviour in this is different because when I remove the first component then both onBeforeUnmount event triggered.

What is expected?

I leave some commented out example where it's working as expected:

When I remove the name=foo component then the onBeforeUnmount should log foo

What is actually happening?

It's actually trigger the last component onBeforeUnmount hook on the same DOM level:

<div>
    <Test name="foo" /> <--- If I remove this
    <Test name="bar" /> <--- This `onBeforeUnmount` will be triggered
</div>

This not happens in these cases:

<div>
    <Test name="foo" /> <--- If I remove this then this component `onBeforeUnmount` hook will be trigged
    <div></div>
    <Test name="bar" />
</div>

<div>
    <div>
        <Test name="foo" /> <--- If I remove this then this component `onBeforeUnmount` hook will be trigged
    </div>
    <div>
        <Test name="bar" />
    </div>
</div>

<div>
    <Test name="foo"  v-if="show"/> <--- If I remove this then this component `onBeforeUnmount` hook will be trigged
    <Test name="bar" />
</div>

System Info

No response

Any additional comments?

No response

Start by running the linked StackBlitz reproduction and comparing it with the SFC Playground example, then inspect the component lifecycle behavior for adjacent components on the same DOM level. Done means removing the foo component invokes its own onBeforeUnmount hook and logs foo rather than bar.