Fix Vue HMR for script tags (#8860)

.changeset/seven-brooms-trade.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/vue': patch
+---
+
+Fix Vue component HMR when updating the script tag

packages/astro/e2e/fixtures/vue-component/src/components/State.vue

@@ -0,0 +1,9 @@
+<script setup>
+import { ref } from 'vue'
+const props = defineProps(['id'])
+const count = ref(1)
+</script>
+
+<template>
+  <span :id="props.id">Count is {{ count }}</span>
+</template>

packages/astro/e2e/fixtures/vue-component/src/pages/index.astro

@@ -2,6 +2,7 @@
 import Counter from '../components/Counter.vue';
 import VueComponent from '../components/VueComponent.vue';
 import AsyncTest from '../components/Test.vue'
+import State from '../components/State.vue'
 
 const someProps = {
 	count: 0,
@@ -35,5 +36,6 @@ const someProps = {
 
 		<VueComponent id="client-only" client:only="vue" />
 		<AsyncTest id="client-test" client:only="vue" />
+		<State id="state" client:load />
 	</body>
 </html>

packages/astro/e2e/vue-component.test.js

@@ -39,3 +39,16 @@ test('test the async vue component in mdx', async ({ page, astro }) => {
 
 	await expect(label, 'component not hydrated').toHaveText('2');
 });
+
+test('hmr works', async ({ page, astro }) => {
+	await page.goto(astro.resolveUrl('/'));
+
+	const span = page.locator('#state');
+	await expect(span).toHaveText('Count is 1');
+
+	await astro.editFile('./src/components/State.vue', (content) =>
+		content.replace('ref(1)', 'ref(2)')
+	);
+
+	await expect(span).toHaveText('Count is 2');
+});

packages/integrations/vue/client.js

@@ -14,16 +14,20 @@ export default (element) =>
 			slots[key] = () => h(StaticHtml, { value, name: key === 'default' ? undefined : key });
 		}
 
-		let content = h(Component, props, slots);
-		// related to https://github.com/withastro/astro/issues/6549
-		// if the component is async, wrap it in a Suspense component
-		if (isAsync(Component.setup)) {
-			content = h(Suspense, null, content);
-		}
-
 		const isHydrate = client !== 'only';
-		const boostrap = isHydrate ? createSSRApp : createApp;
-		const app = boostrap({ name, render: () => content });
+		const bootstrap = isHydrate ? createSSRApp : createApp;
+		const app = bootstrap({
+			name,
+			render() {
+				let content = h(Component, props, slots);
+				// related to https://github.com/withastro/astro/issues/6549
+				// if the component is async, wrap it in a Suspense component
+				if (isAsync(Component.setup)) {
+					content = h(Suspense, null, content);
+				}
+				return content;
+			},
+		});
 		await setup(app);
 		app.mount(element, isHydrate);