fix(plugin-vue): invalidate script module cache when it changed in hot update

packages/plugin-vue/src/handleHotUpdate.ts

@@ -45,7 +45,8 @@ export async function handleHotUpdate(
  })[0]
  const templateModule = modules.find((m) => /type=template/.test(m.url))
 
- if (hasScriptChanged(prevDescriptor, descriptor)) {
+ const scriptChanged = hasScriptChanged(prevDescriptor, descriptor)
+ if (scriptChanged) {
  let scriptModule: ModuleNode | undefined
  if (
  (descriptor.scriptSetup?.lang && !descriptor.scriptSetup.src) ||
@@ -66,7 +67,7 @@ export async function handleHotUpdate(
  // binding metadata. However, when reloading the template alone the binding
  // metadata will not be available since the script part isn't loaded.
  // in this case, reuse the compiled script from previous descriptor.
- if (mainModule && !affectedModules.has(mainModule)) {
+ if (!scriptChanged) {
  setResolvedScript(
  descriptor,
  getResolvedScript(prevDescriptor, false)!,

playground/vue/HmrTsx.vue

@@ -0,0 +1,17 @@
+<template>
+ <h2 class="hmr-tsx">HMR</h2>
+ <p>Click the button then edit this message. The count should be preserved.</p>
+ <button class="hmr-tsx-inc" @click="count++">count is {{ count }}</button>
+</template>
+
+<script setup lang="tsx">
+import { ref } from 'vue'
+
+const count = ref(0)
+</script>
+
+<style>
+.hmr-tsx-inc {
+ color: red;
+}
+</style>

playground/vue/Main.vue

@@ -5,6 +5,9 @@
  <div class="hmr-block">
  <Hmr />
  </div>
+ <div class="hmr-tsx-block">
+ <HmrTsx />
+ </div>
  <Syntax />
  <PreProcessors />
  <CssModules />
@@ -27,6 +30,7 @@
 
 <script setup lang="ts">
 import Hmr from './Hmr.vue'
+import HmrTsx from './HmrTsx.vue'
 import Syntax from './Syntax.vue'
 import PreProcessors from './PreProcessors.vue'
 import CssModules from './CssModules.vue'

playground/vue/__tests__/vue.spec.ts

@@ -191,6 +191,14 @@ describe('hmr', () => {
  editFile('Hmr.vue', (code) => code.replace(/<template>.+<\/template>/s, ''))
  await untilUpdated(() => page.innerHTML('.hmr-block'), '<!---->')
  })
+
+ test('should re-render when template and tsx script both changed', async () => {
+ editFile('HmrTsx.vue', (code) => code.replace(/count/g, 'updatedCount'))
+ await untilUpdated(
+ () => page.innerHTML('.hmr-tsx-block .hmr-tsx-inc'),
+ 'updatedCount is 0'
+ )
+ })
 })
 
 describe('src imports', () => {