fix(hydration): the component vnode's el should be updated when a mismatch occurs.

packages/runtime-core/__tests__/hydration.spec.ts

@@ -21,6 +21,7 @@ import {
   h,
   nextTick,
   onMounted,
+  onServerPrefetch,
   openBlock,
   reactive,
   ref,
@@ -518,6 +519,45 @@ describe('SSR hydration', () => {
     )
   })
 
+  test('with data-allow-mismatch component when using onServerPrefetch', async () => {
+    const Comp = {
+      template: `
+        <div>Comp2</div>
+      `,
+    }
+    let foo: any
+    const App = {
+      setup() {
+        const flag = ref(true)
+        foo = () => {
+          flag.value = false
+        }
+        onServerPrefetch(() => (flag.value = false))
+        return { flag }
+      },
+      components: {
+        Comp,
+      },
+      template: `
+        <span data-allow-mismatch>
+          <Comp v-if="flag"></Comp>
+        </span>
+      `,
+    }
+    // hydrate
+    const container = document.createElement('div')
+    container.innerHTML = await renderToString(h(App))
+    createSSRApp(App).mount(container)
+    expect(container.innerHTML).toBe(
+      '<span data-allow-mismatch=""><div>Comp2</div></span>',
+    )
+    foo()
+    await nextTick()
+    expect(container.innerHTML).toBe(
+      '<span data-allow-mismatch=""><!--v-if--></span>',
+    )
+  })
+
   test('Teleport unmount (full integration)', async () => {
     const Comp1 = {
       template: `

packages/runtime-core/src/renderer.ts

@@ -1328,6 +1328,10 @@ function baseCreateRenderer(
               parentSuspense,
               null,
             )
+            // when data-allow-mismatch is set, the component vnode's el may be incorrect, so it should be updated
+            if (initialVNode) {
+              initialVNode.el = instance.subTree.el
+            }
             if (__DEV__) {
               endMeasure(instance, `hydrate`)
             }