diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts
index a5781a3e..d78082b5 100644
--- a/packages/plugin-vue/src/handleHotUpdate.ts
+++ b/packages/plugin-vue/src/handleHotUpdate.ts
@@ -156,7 +156,7 @@ export async function handleHotUpdate(
   if (didUpdateStyle) {
     updateType.push(`style`)
   }
-  if (updateType.length) {
+  if (updateType.length || scriptChanged) {
     if (file.endsWith('.vue')) {
       // invalidate the descriptor cache so that the next transform will
       // re-analyze the file and pick up the changes.
diff --git a/playground/vue/Hmr.vue b/playground/vue/Hmr.vue
index 541929d4..07dda06b 100644
--- a/playground/vue/Hmr.vue
+++ b/playground/vue/Hmr.vue
@@ -3,6 +3,10 @@
   <p>Click the button then edit this message. The count should be preserved.</p>
   <button class="hmr-inc" @click="count++">count is {{ count }}</button>
   <span class="hmr-number">{{ number }}</span>
+  <div>
+    <span class="hmr-bar-text">bar-title</span>
+    <span class="hmr-bar">{{ bar }}</span>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -12,6 +16,7 @@ import { test } from './lib.js'
 const number = test()
 
 let foo: number = 0
+let bar = 'bar'
 
 const count = ref(foo)
 </script>
diff --git a/playground/vue/__tests__/vue.spec.ts b/playground/vue/__tests__/vue.spec.ts
index 898d5123..c44d5cd2 100644
--- a/playground/vue/__tests__/vue.spec.ts
+++ b/playground/vue/__tests__/vue.spec.ts
@@ -221,6 +221,24 @@ describe('hmr', () => {
     await untilUpdated(() => page.textContent('.hmr-number'), '200')
   })
 
+  test('should reload when script changes after a rerender', async () => {
+    // rerender
+    editFile('Hmr.vue', (code) => code.replace('bar-title', 'bar-title1'))
+    await untilUpdated(() => page.textContent('.hmr-bar-text'), 'bar-title1')
+
+    // change 'bar' to 'updated', should reload
+    editFile('Hmr.vue', (code) =>
+      code.replace(`let bar = 'bar'`, `let bar = 'updated'`),
+    )
+    await untilUpdated(() => page.textContent('.hmr-bar'), 'updated')
+
+    // change 'updated' to 'bar', should reload again not rerender
+    editFile('Hmr.vue', (code) =>
+      code.replace(`let bar = 'updated'`, `let bar = 'bar'`),
+    )
+    await untilUpdated(() => page.textContent('.hmr-bar'), 'bar')
+  })
+
   test('global hmr for some scenarios', async () => {
     editFile('Hmr.vue', (code) =>
       code.replace('</template>', '  <Node/>\n' + '</template>'),