Hydration errors on useId inside KeepAlive tag

[Larsmyrup]

Vue version

3.5.6

Link to minimal reproduction

https://stackblitz.com/edit/github-1yeqp6?file=src%2Fcomponents%2FMyComponent.vue

Steps to reproduce

Run the project
See that there is no hydration mismatch issues on load (and reload if you wish).
Trigger a HMR update, by updating the script tag in MyComponent.vue (my go to is suffixing an 'a' to the console.log statement) and see the hydration mismatch warning, the Hydration completed but contains mismatches-error and notice that 'My component' is no longer visible.

Also notice you can trigger a HMR update in the MyKeepAliveContainer.vue component without getting the warning.

What is expected?

Hydration mismatch errors should be consistent with the code, not happen based on what file triggers an HMR update.

What is actually happening?

Hydration acts differently between different files and throws and error i don't think should be there.

However this only seems to happen if you use useId in a component, inside a component wrapping it in a <KeepAlive/>-tag.

System Info

System:
    OS: macOS 13.6.3
    CPU: (12) arm64 Apple M2 Pro
    Memory: 122.17 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
  Browsers:
    Safari: 16.6
    Chrome 130.0.6723.59 (Official Build) (arm64)

Any additional comments?

Initially ran into it in a Nuxt project and reported it there, but @danielroe pointed out it seems to be a Vue issue.

[edison1105]

duplicate of #7706