🐛 BUG: HMR with vue components causes a hydration mismatch error

[tony-sull]

What version of astro are you using?

1.0.0-beta.42

Are you using an SSR adapter? If so, which one?

none

What package manager are you using?

pnpm

What operating system are you using?

Mac

Describe the Bug

When editing a vue component in dev, the page flashes with the new content then reverts back after vue hits the following error

Hydration completed but contains mismatches.

It looks like vue core has a few recent changes that are related to hydration and HMR that may be related to this regression

Reproduction

To reproduce, clone the latest framework-vue starter and change any of the rendered HTML - the brower flashes with the update then reverts

According to Vue's docs, any updates to the <template> or <style> should be hot reloaded without losing the component state, any changes to the <script> should refresh the component back to it's default state in case any lifecycle hooks had side effects

Link to Minimal Reproducible Example

https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-vue?file=package.json&on=stackblitz

Participation

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

[tony-sull]

Tried rolling back a few versions with both Vue and Astro and the issue still reproduces, not sure how recent this regression is?