chore: delay insert self anchor during hydration

packages/runtime-core/src/hydration.ts

@@ -659,17 +659,6 @@ export function createHydrationFunctions(
         )
       }
     }
-
-    // the server output does not contain blank text nodes. It appears here that
-    // it is a dynamically inserted anchor, and needs to be skipped.
-    // e.g. vaporInteropImpl.mount() > selfAnchor
-    if (
-      node &&
-      node.nodeType === DOMNodeTypes.TEXT &&
-      !(node as Text).data.trim()
-    ) {
-      node = nextSibling(node)
-    }
     return node
   }
 

packages/runtime-vapor/src/vdomInterop.ts

@@ -24,6 +24,7 @@ import {
   isRef,
   isVNode,
   onScopeDispose,
+  queuePostFlushCb,
   renderSlot,
   setTransitionHooks as setVNodeTransitionHooks,
   shallowReactive,
@@ -74,7 +75,12 @@ const vaporInteropImpl: Omit<
 > = {
   mount(vnode, container, anchor, parentComponent) {
     let selfAnchor = (vnode.el = vnode.anchor = createTextNode())
-    container.insertBefore(selfAnchor, anchor)
+    if (isHydrating) {
+      // avoid vdom hydration children mismatch by the selfAnchor, delay its insertion
+      queuePostFlushCb(() => container.insertBefore(selfAnchor, anchor))
+    } else {
+      container.insertBefore(selfAnchor, anchor)
+    }
     const prev = currentInstance
     simpleSetCurrentInstance(parentComponent)