diff --git a/src/lights/AmbientLight.js b/src/lights/AmbientLight.js
index b424633..4f160cc 100644
--- a/src/lights/AmbientLight.js
+++ b/src/lights/AmbientLight.js
@@ -1,11 +1,12 @@
+import { defineComponent } from 'vue';
 import { AmbientLight } from 'three';
 import Light from './Light.js';
 
-export default {
+export default defineComponent({
   extends: Light,
   created() {
     this.light = new AmbientLight(this.color, this.intensity);
     this.initLight();
   },
   __hmrId: 'AmbientLight',
-};
+});
diff --git a/src/lights/DirectionalLight.js b/src/lights/DirectionalLight.js
index 13a1f99..a738a56 100644
--- a/src/lights/DirectionalLight.js
+++ b/src/lights/DirectionalLight.js
@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue';
 import { DirectionalLight } from 'three';
 import Light from './Light.js';
 
-export default {
+export default defineComponent({
   extends: Light,
   props: {
     target: Object,
@@ -11,4 +12,4 @@ export default {
     this.initLight();
   },
   __hmrId: 'DirectionalLight',
-};
+});
diff --git a/src/lights/HemisphereLight.js b/src/lights/HemisphereLight.js
index 4cb88ab..1a7573a 100644
--- a/src/lights/HemisphereLight.js
+++ b/src/lights/HemisphereLight.js
@@ -1,8 +1,8 @@
+import { defineComponent, watch } from 'vue';
 import { HemisphereLight } from 'three';
-import { watch } from 'vue';
 import Light from './Light.js';
 
-export default {
+export default defineComponent({
   extends: Light,
   props: {
     groundColor: { type: String, default: '#444444' },
@@ -13,4 +13,4 @@ export default {
     this.initLight();
   },
   __hmrId: 'HemisphereLight',
-};
+});
diff --git a/src/lights/Light.js b/src/lights/Light.js
index 829aff1..8c7628a 100644
--- a/src/lights/Light.js
+++ b/src/lights/Light.js
@@ -1,8 +1,8 @@
-import { watch } from 'vue';
+import { defineComponent, watch } from 'vue';
 import Object3D from '../core/Object3D.js';
 import { bindProp, setFromProp } from '../tools';
 
-export default {
+export default defineComponent({
   extends: Object3D,
   name: 'Light',
   props: {
@@ -44,4 +44,4 @@ export default {
     },
   },
   __hmrId: 'Light',
-};
+});
diff --git a/src/lights/PointLight.js b/src/lights/PointLight.js
index a22893c..532f717 100644
--- a/src/lights/PointLight.js
+++ b/src/lights/PointLight.js
@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue';
 import { PointLight } from 'three';
 import Light from './Light.js';
 
-export default {
+export default defineComponent({
   extends: Light,
   props: {
     distance: {
@@ -18,4 +19,4 @@ export default {
     this.initLight();
   },
   __hmrId: 'PointLight',
-};
+});
diff --git a/src/lights/RectAreaLight.js b/src/lights/RectAreaLight.js
index 0d78df5..551cad9 100644
--- a/src/lights/RectAreaLight.js
+++ b/src/lights/RectAreaLight.js
@@ -1,10 +1,10 @@
+import { defineComponent, watch } from 'vue';
 import { RectAreaLight } from 'three';
 import { RectAreaLightUniformsLib } from 'three/examples/jsm/lights/RectAreaLightUniformsLib.js';
 import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper.js';
-import { watch } from 'vue';
 import Light from './Light.js';
 
-export default {
+export default defineComponent({
   extends: Light,
   props: {
     width: { type: Number, default: 10 },
@@ -32,4 +32,4 @@ export default {
     if (this.lightHelper) this.removeFromParent(this.lightHelper);
   },
   __hmrId: 'RectAreaLight',
-};
+});
diff --git a/src/lights/SpotLight.js b/src/lights/SpotLight.js
index 0d23a13..6013bad 100644
--- a/src/lights/SpotLight.js
+++ b/src/lights/SpotLight.js
@@ -1,8 +1,8 @@
+import { defineComponent, watch } from 'vue';
 import { SpotLight } from 'three';
-import { watch } from 'vue';
 import Light from './Light.js';
 
-export default {
+export default defineComponent({
   extends: Light,
   props: {
     angle: { type: Number, default: Math.PI / 3 },
@@ -21,4 +21,4 @@ export default {
     this.initLight();
   },
   __hmrId: 'SpotLight',
-};
+});