Fix Vue HMR for script tags (#8860)

1 files changed, 13 insertions, 9 deletions

diff --git a/packages/integrations/vue/client.js b/packages/integrations/vue/client.js
index 8b2a5eede..7e1d8090e 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);