Vue component state persistence does not work

[johannesspohr]

Astro Info

Astro                    v4.14.5
Node                     v18.20.3
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/vue
                         @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When using a Vue component with ViewTransitions, the state is not persisted as expected. A warning about a hydration mismatch is also present in the console.

It works when using transition:persist-props.

What's the expected result?

When incrementing the buttons in the example and then clicking "navigate", the Vue and React example should keep the counts, but the Vue component is reset.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-jhuzfh-jxxerz

Participation

• I am willing to submit a pull request for this issue.

[ardakod]

Just to add that it is also broken in svelte and solid
svelte
https://stackblitz.com/edit/github-msd2ka-serlyw
solid
https://stackblitz.com/edit/github-msd2ka-znzbns
In addition it may work with transition:persist-props for a count persistence but however it remains a different usecase as the component with transition:persist-props doesn't update on props change. The usecase where a component state is persisted and still react to props change is broken for vue, svelte and solid. That usecase should normally be fully covered by transition:persist alone.
React works perfectly with transition:persist alone, it both perserves state and reacts to props changes.
https://stackblitz.com/edit/github-msd2ka-ocbvxt

[jasonlav]

AlpineJS is having a similar issue (https://stackblitz.com/edit/withastro-astro-nfhm78), however, I suspect that is due to AlpineJS not having the capability to hydrate. Can someone confirm that?