Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-prfqzh?file=src%2Fmain.js

Steps to reproduce

I simplified the code within one js file:

import { createApp, defineComponent, h, onMounted, ref } from 'vue'

const prevData = [
  { name: 'child-1' },
  {
    name: 'parent', children: [
      { name: 'child-2' }
    ]
  }
]
const nextData = [
  { name: 'child-1' },
  { name: 'child-2' }
]
const data = ref(prevData)

const Child = defineComponent({
  name: 'Child',
  props: {
    name: String,
  },
  setup(props) {
    return () => h('div', { id: props.name }, props.name)
  }
})

const Parent = defineComponent({
  name: 'Parent',
  props: {
    name: String
  },
  setup(props, { slots }) {
    return () => h('div', { id: props.name }, [
      props.name,
      slots.default()
    ])
  }
})

createApp({
  name: "App",

  setup() {

    onMounted(() => {
      const child2 = document.querySelector('#child-2')
      const container = document.querySelector('#app')
      container.append(child2)
      /* then the bug happens ... */
      data.value = nextData

    })

    return () => data.value.map((i) => {
      if (!i.children) {
        return h(Child, { name: i.name, key: i.name })
      }
      if (!i.children.length) {
        return undefined
      }
      return h(Parent, { name: i.name, key: i.name }, {
        default: () => i.children.map((j) => h(Child, { name: j.name, key: i.name }))
      })
    })
  }
}).mount('#app')

What is expected?

Only two dom left:

What is actually happening?

System Info

No response

Any additional comments?

No response