Vue version

3.2.46

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-zoodmv?file=src%2Fpages%2FHome.vue

Steps to reproduce

• Visit the stackblitz
• Wait for the node server to start
• Open the console log to see the Hydration mismatches message mismatch

What is expected?

Hydration success without any mismatches

What is actually happening?

[Vue warn]: Hydration text mismatch:
- Client: "Mismatch here 1,2,3"
- Server: "Mismatch here " 
  at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

System Info

No response

Any additional comments?

The hydration mismatches only happened when meeting all of these conditions:

• Child component is a text node only component

<!-- Test.vue -->
<template>
  {{ item?.join() }}
</template>

• Mixing text and the custom component in the same node and the child component uses the parent data as its props

<!-- Home.vue -->
<div>
    {{ text }}
    <Test :item="item"></Test>
</div>

• Using createSSRApp for both SSR and CSR. If we use createSSRApp for the SSR and createApp for the CSR, the issue will disappear

I'm not sure if this issue is related to #7285 or not

duplicate of https://github.com/vuejs/core/issues/7285