Update of component prop before hydration causes hydration to fail

[maxsjoblomws]

Vue version

3.5.13

Link to minimal reproduction

https://stackblitz.com/edit/github-enjfxm8b?file=src%2FApp.vue,src%2FFoo.vue

Steps to reproduce

I recommend to open browser dev console to see the errors when the "bug" is reproduced. As soon as the hydration fails we get an error, following this we get an error each time we update a prop to the component that failed hydration.

1. Build stackblitz minimal reproduction
2. Resize stackblitz preview to be larger than 100px wide
3. Reload stackblitz preview (If it wasnt already 100px+ wide)
4. Press toggle button one or more times
5. Resize stackblitz preview width to be less than 100px to hydrate the Foo component
6. Now the Foo component no longer reacts to prop updates

What is expected?

I would expect the component to hydrate successfully and function correctly even if its reactive props are updated before hydration, perhaps with a hydration warning. Alternatively, it would be reasonable if updating a prop before hydration could automatically trigger that component's hydration process without needing a custom hydration function.

What is actually happening?

If a reactive prop is updated before the component consuming it has finished hydrating, the hydration process for that component fails. Consequently, the component becomes unresponsive to any further updates of that prop after the failed hydration attempt.

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    vue: ^3.5.13 => 3.5.13

Any additional comments?

It feels sub-optimal to not be able to use the build-in hydrate functions in combination with a reactive prop without having to worry about the hydration failing. Currently a custom hydrate function needs to be used as soon as we want a reactive property on a component that has delayed hydration or we need to make sure that the prop cant update before the component is hydrated. It would be very neat and less error prone to not have to worry about these problems, both with custom hydration functions and with built-in hydration functions.

It is also worth noting that this behaviour occurs with all tested hydration methods. It can be mitigated by adding a once watcher that calls hydrate whenever a prop to that component is updated.

A version of this issue was originally reported as a nuxt issue