(tsx) Vue SSR hydration error (`defineComponent`)

[ElYaiko]

Vue version

3.4.38

Link to minimal reproduction

https://stackblitz.com/edit/github-wvhf41?file=app.tsx

Steps to reproduce

• Create a TSX component
• Return a text concated with a ref (App 2: {a.value}<br/>)

What is expected?

To render the line

What is actually happening?

runtime-core.esm-bundler.js?v=17134382:50 [Vue warn]: Hydration text mismatch in <div id=​"app">​…​</div>​ 
  - rendered on server: "App 2: 0"
  - expected on client: "App 2: " 
  at <Anonymous key=4 > 
  at <NuxtRoot>

System Info

No response

Any additional comments?

You can see the text App 1 is rendered with the ref but App 2 not.
Related:
vuejs/babel-plugin-jsx#568
#7285

[edison1105]

a workaround

<div id="app">
  {`App 1: ${String(a.value)}`}
  <br />
  App 2: {String(a.value)}
  <br />
</div>

[ElYaiko]

a workaround

<div id="app">
  {`App 1: ${String(a.value)}`}
  <br />
  App 2: {String(a.value)}
  <br />
</div>

That worked, but I don't think is a good DX...