diff --git a/packages/playground/vue/PreProcessors.vue b/packages/playground/vue/PreProcessors.vue
index 50fa8d407ed8cf..ddb636678e8cdd 100644
--- a/packages/playground/vue/PreProcessors.vue
+++ b/packages/playground/vue/PreProcessors.vue
@@ -6,6 +6,9 @@ p.pug
 p.pug-less
   | This is rendered from <template lang="pug">
   | and styled with <style lang="less">. It should be green.
+p.pug-stylus
+  | This is rendered from <template lang="pug">
+  | and styled with <style lang="stylus">. It should be orange.
 SlotComponent
   template(v-slot:test-slot)
     div.pug-slot slot content
@@ -32,3 +35,10 @@ $color: magenta;
   color: @color;
 }
 </style>
+
+<style lang="stylus">
+color = orange
+
+.pug-stylus
+  color: color
+</style>
diff --git a/packages/playground/vue/__tests__/vue.spec.ts b/packages/playground/vue/__tests__/vue.spec.ts
index 4626e30e9ac17c..8d13069ded396f 100644
--- a/packages/playground/vue/__tests__/vue.spec.ts
+++ b/packages/playground/vue/__tests__/vue.spec.ts
@@ -56,6 +56,21 @@ describe('pre-processors', () => {
     )
     await untilUpdated(() => getColor(el), 'blue')
   })
+
+  test('stylus + change lang', async () => {
+    expect(await getColor('p.pug-stylus')).toBe('orange')
+    editFile('PreProcessors.vue', (code) =>
+      code
+        .replace('<style lang="stylus">', '<style lang="scss">')
+        .replace('color = orange', '$color: yellow;')
+        .replace('color: color', '{ color: $color; }')
+    )
+    await untilUpdated(() => getColor('p.pug-stylus'), 'yellow')
+    editFile('PreProcessors.vue', (code) =>
+      code.replace('$color: yellow;', '$color: orange;')
+    )
+    await untilUpdated(() => getColor('p.pug-stylus'), 'orange')
+  })
 })
 
 describe('css modules', () => {
diff --git a/packages/plugin-vue/src/handleHotUpdate.ts b/packages/plugin-vue/src/handleHotUpdate.ts
index ae07de16e19c93..fd1275f43050d1 100644
--- a/packages/plugin-vue/src/handleHotUpdate.ts
+++ b/packages/plugin-vue/src/handleHotUpdate.ts
@@ -88,7 +88,11 @@ export async function handleHotUpdate({
     const next = nextStyles[i]
     if (!prev || !isEqualBlock(prev, next)) {
       didUpdateStyle = true
-      const mod = modules.find((m) => m.url.includes(`type=style&index=${i}`))
+      const mod = modules.find(
+        (m) =>
+          m.url.includes(`type=style&index=${i}`) &&
+          m.url.endsWith(`.${next.lang || 'css'}`)
+      )
       if (mod) {
         affectedModules.add(mod)
       } else {