diff --git a/src/materials/BasicMaterial.js b/src/materials/BasicMaterial.js
index 313273a..21c1326 100644
--- a/src/materials/BasicMaterial.js
+++ b/src/materials/BasicMaterial.js
@@ -8,4 +8,5 @@ export default {
       color: this.color,
     });
   },
+  __hmrId: 'BasicMaterial',
 };
diff --git a/src/materials/LambertMaterial.js b/src/materials/LambertMaterial.js
index be54279..c280054 100644
--- a/src/materials/LambertMaterial.js
+++ b/src/materials/LambertMaterial.js
@@ -8,4 +8,5 @@ export default {
       color: this.color,
     });
   },
+  __hmrId: 'LambertMaterial',
 };
diff --git a/src/materials/Material.js b/src/materials/Material.js
index 6972752..2276771 100644
--- a/src/materials/Material.js
+++ b/src/materials/Material.js
@@ -1,4 +1,5 @@
-import { FrontSide } from 'three';
+import { watch } from 'vue';
+import { Color, FrontSide } from 'three';
 
 export default {
   inject: ['three'],
@@ -39,6 +40,9 @@ export default {
   },
   mounted() {
     this.three.materials[this.id] = this.material;
+    watch(() => this.color, () => {
+      this.material.color = new Color(this.color);
+    });
   },
   unmounted() {
     this.material.dispose();
@@ -55,4 +59,5 @@ export default {
   render() {
     return [];
   },
+  __hmrId: 'Material',
 };
diff --git a/src/materials/PhongMaterial.js b/src/materials/PhongMaterial.js
index 962843c..5c4831f 100644
--- a/src/materials/PhongMaterial.js
+++ b/src/materials/PhongMaterial.js
@@ -8,4 +8,5 @@ export default {
       color: this.color,
     });
   },
+  __hmrId: 'PhongMaterial',
 };
diff --git a/src/materials/PhysicalMaterial.js b/src/materials/PhysicalMaterial.js
index 60e1b04..b12f9c4 100644
--- a/src/materials/PhysicalMaterial.js
+++ b/src/materials/PhysicalMaterial.js
@@ -8,4 +8,5 @@ export default {
       color: this.color,
     });
   },
+  __hmrId: 'PhysicalMaterial',
 };
diff --git a/src/materials/ShaderMaterial.js b/src/materials/ShaderMaterial.js
index fe5fedf..51e3045 100644
--- a/src/materials/ShaderMaterial.js
+++ b/src/materials/ShaderMaterial.js
@@ -22,4 +22,5 @@ export default {
   render() {
     return [];
   },
+  __hmrId: 'ShaderMaterial',
 };
diff --git a/src/materials/StandardMaterial.js b/src/materials/StandardMaterial.js
index bd382d8..286265a 100644
--- a/src/materials/StandardMaterial.js
+++ b/src/materials/StandardMaterial.js
@@ -24,4 +24,5 @@ export default {
   created() {
     this.material = new MeshStandardMaterial(this.propsValues());
   },
+  __hmrId: 'StandardMaterial',
 };
diff --git a/src/materials/SubSurfaceMaterial.js b/src/materials/SubSurfaceMaterial.js
index e7cc9ef..fe652cb 100644
--- a/src/materials/SubSurfaceMaterial.js
+++ b/src/materials/SubSurfaceMaterial.js
@@ -66,4 +66,5 @@ export default {
       vertexColors: this.vertexColors,
     });
   },
+  __hmrId: 'SubSurfaceMaterial',
 };