diff --git a/src/components/liquid/LiquidPlane.js b/src/components/liquid/LiquidPlane.js
index dcb5505..d3bdeff 100644
--- a/src/components/liquid/LiquidPlane.js
+++ b/src/components/liquid/LiquidPlane.js
@@ -1,10 +1,10 @@
+import { defineComponent, watch } from 'vue';
 import { DoubleSide, Mesh, MeshStandardMaterial, PlaneGeometry } from 'three';
-import { watch } from 'vue';
 import Object3D from '../../core/Object3D.js';
 import { bindProps } from '../../tools';
 import LiquidEffect from './LiquidEffect.js';
 
-export default {
+export default defineComponent({
   extends: Object3D,
   props: {
     width: { type: Number, default: 10 },
@@ -51,4 +51,4 @@ export default {
       this.liquidEffect.update();
     },
   },
-};
+});
diff --git a/src/components/noisy/NoisyImage.js b/src/components/noisy/NoisyImage.js
index 2bcc0cc..3b3de8a 100644
--- a/src/components/noisy/NoisyImage.js
+++ b/src/components/noisy/NoisyImage.js
@@ -1,9 +1,9 @@
+import { defineComponent, watch } from 'vue';
 import { DoubleSide, MeshBasicMaterial, PlaneGeometry } from 'three';
-import { watch } from 'vue';
 import Image from '../../meshes/Image.js';
 import snoise2 from '../../glsl/snoise2.glsl.js';
 
-export default {
+export default defineComponent({
   extends: Image,
   props: {
     widthSegments: { type: Number, default: 20 },
@@ -86,4 +86,4 @@ export default {
     },
   },
   __hmrId: 'NoisyImage',
-};
+});
diff --git a/src/components/noisy/NoisyPlane.js b/src/components/noisy/NoisyPlane.js
index 3a68591..c6bd34c 100644
--- a/src/components/noisy/NoisyPlane.js
+++ b/src/components/noisy/NoisyPlane.js
@@ -1,10 +1,10 @@
+import { defineComponent, watch } from 'vue';
 import { ObjectSpaceNormalMap, ShaderMaterial, Vector2, WebGLRenderTarget } from 'three';
 import { Pass } from 'three/examples/jsm/postprocessing/Pass.js';
-import { watch } from 'vue';
 import Plane from '../../meshes/Plane.js';
 import snoise3 from '../../glsl/snoise3.glsl.js';
 
-export default {
+export default defineComponent({
   extends: Plane,
   props: {
     timeCoef: { type: Number, default: 0.001 },
@@ -126,4 +126,4 @@ export default {
     },
   },
   __hmrId: 'NoisyPlane',
-};
+});
diff --git a/src/components/noisy/NoisySphere.js b/src/components/noisy/NoisySphere.js
index c129751..1fe9789 100644
--- a/src/components/noisy/NoisySphere.js
+++ b/src/components/noisy/NoisySphere.js
@@ -1,8 +1,8 @@
-import { watch } from 'vue';
+import { defineComponent, watch } from 'vue';
 import Sphere from '../../meshes/Sphere.js';
 import snoise4 from '../../glsl/snoise4.glsl.js';
 
-export default {
+export default defineComponent({
   extends: Sphere,
   props: {
     radius: { type: Number, default: 20 },
@@ -65,4 +65,4 @@ export default {
     },
   },
   __hmrId: 'NoisySphere',
-};
+});
diff --git a/src/components/noisy/NoisyText.js b/src/components/noisy/NoisyText.js
index a317ca4..34692c6 100644
--- a/src/components/noisy/NoisyText.js
+++ b/src/components/noisy/NoisyText.js
@@ -1,8 +1,8 @@
-import { watch } from 'vue';
+import { defineComponent, watch } from 'vue';
 import Text from '../../meshes/Text.js';
 import snoise2 from '../../glsl/snoise2.glsl.js';
 
-export default {
+export default defineComponent({
   extends: Text,
   props: {
     timeCoef: { type: Number, default: 0.001 },
@@ -62,4 +62,4 @@ export default {
     },
   },
   __hmrId: 'NoisyText',
-};
+});
diff --git a/src/components/sliders/Slider1.vue b/src/components/sliders/Slider1.vue
index fcb947e..094abde 100644
--- a/src/components/sliders/Slider1.vue
+++ b/src/components/sliders/Slider1.vue
@@ -7,6 +7,7 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import { Object3D } from 'three';
 import { gsap, Power4 } from 'gsap';
 
@@ -18,7 +19,7 @@ import { lerp } from '../../tools';
 import AnimatedPlane from './AnimatedPlane.js';
 import useTextures from '../../use/useTextures';
 
-export default {
+export default defineComponent({
   components: { Camera, Renderer, Scene },
   props: {
     images: Array,
@@ -161,5 +162,5 @@ export default {
       this.plane2.o3d.position.z = progress - 1;
     },
   },
-};
+});
 </script>
diff --git a/src/components/sliders/Slider2.vue b/src/components/sliders/Slider2.vue
index b277ba1..cac4d96 100644
--- a/src/components/sliders/Slider2.vue
+++ b/src/components/sliders/Slider2.vue
@@ -6,6 +6,7 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import { Vector2 } from 'three';
 import { gsap, Power4 } from 'gsap';
 
@@ -17,7 +18,7 @@ import { lerp, lerpv2 } from '../../tools';
 import ZoomBlurImage from './ZoomBlurImage.js';
 import useTextures from '../../use/useTextures.js';
 
-export default {
+export default defineComponent({
   components: { OrthographicCamera, Renderer, Scene },
   props: {
     images: Array,
@@ -154,5 +155,5 @@ export default {
       this.image2.uStrength.value = -1 + progress;
     },
   },
-};
+});
 </script>
diff --git a/src/components/viewers/GLTFViewer.vue b/src/components/viewers/GLTFViewer.vue
index 8c9bb09..a3028b3 100644
--- a/src/components/viewers/GLTFViewer.vue
+++ b/src/components/viewers/GLTFViewer.vue
@@ -8,12 +8,13 @@
 </template>
 
 <script>
+import { defineComponent } from 'vue';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import Camera from '../../core/PerspectiveCamera.js';
 import Renderer from '../../core/Renderer.js';
 import Scene from '../../core/Scene.js';
 
-export default {
+export default defineComponent({
   components: { Camera, Renderer, Scene },
   props: {
     src: String,
@@ -27,5 +28,5 @@ export default {
       this.renderer.three.scene.add(gltf.scene);
     });
   },
-};
+});
 </script>