From aab8b9d7500255e84420f3832338c582c806810e Mon Sep 17 00:00:00 2001
From: bluwy <bjornlu.dev@gmail.com>
Date: Wed, 18 Oct 2023 21:03:36 +0800
Subject: [PATCH] Fix Vue HMR for script tags

---
 .changeset/seven-brooms-trade.md              |  5 +++++
 .../vue-component/src/components/State.vue    |  9 ++++++++
 .../vue-component/src/pages/index.astro       |  2 ++
 packages/astro/e2e/vue-component.test.js      | 13 +++++++++++
 packages/integrations/vue/client.js           | 22 +++++++++++--------
 5 files changed, 42 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/seven-brooms-trade.md
 create mode 100644 packages/astro/e2e/fixtures/vue-component/src/components/State.vue

diff --git a/.changeset/seven-brooms-trade.md b/.changeset/seven-brooms-trade.md
new file mode 100644
index 000000000000..124df8d06023
--- /dev/null
+++ b/.changeset/seven-brooms-trade.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/vue': patch
+---
+
+Fix Vue component HMR when updating the script tag
diff --git a/packages/astro/e2e/fixtures/vue-component/src/components/State.vue b/packages/astro/e2e/fixtures/vue-component/src/components/State.vue
new file mode 100644
index 000000000000..920cb4594265
--- /dev/null
+++ b/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>
diff --git a/packages/astro/e2e/fixtures/vue-component/src/pages/index.astro b/packages/astro/e2e/fixtures/vue-component/src/pages/index.astro
index 5ea9823b6376..fb10e60382d8 100644
--- a/packages/astro/e2e/fixtures/vue-component/src/pages/index.astro
+++ b/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>
diff --git a/packages/astro/e2e/vue-component.test.js b/packages/astro/e2e/vue-component.test.js
index b7371cd1b1f0..5d0455dee66c 100644
--- a/packages/astro/e2e/vue-component.test.js
+++ b/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');
+});
diff --git a/packages/integrations/vue/client.js b/packages/integrations/vue/client.js
index 8b2a5eede16c..7e1d8090efb1 100644
--- a/packages/integrations/vue/client.js
+++ b/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);