diff --git a/src/node/serverPluginHmr.ts b/src/node/serverPluginHmr.ts
index a93a7196b48fdf..82c7d5f91f81e2 100644
--- a/src/node/serverPluginHmr.ts
+++ b/src/node/serverPluginHmr.ts
@@ -210,7 +210,14 @@ export const hmrPlugin: Plugin = ({ root, app, server, watcher }) => {
 
     const prevStyles = prevDescriptor.styles || []
     const nextStyles = descriptor.styles || []
-    if (prevStyles.some((s) => s.scoped) !== nextStyles.some((s) => s.scoped)) {
+    if (
+      prevStyles.some((s) => s.scoped) !== nextStyles.some((s) => s.scoped) ||
+      // TODO for now we force the component to reload on <style module> change
+      // but this should be optimizable to replace the __cssMoudles object
+      // on script and only trigger a rerender.
+      prevStyles.some((s) => s.module != null) ||
+      nextStyles.some((s) => s.module != null)
+    ) {
       notify({
         type: 'vue-reload',
         path: servedPath,