diff --git a/src/effects/BokehPass.js b/src/effects/BokehPass.js
index bb38876..616c1ae 100644
--- a/src/effects/BokehPass.js
+++ b/src/effects/BokehPass.js
@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue';
 import { BokehPass } from 'three/examples/jsm/postprocessing/BokehPass.js';
 import EffectPass from './EffectPass.js';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   props: {
     focus: {
@@ -40,4 +41,4 @@ export default {
     this.completePass(pass);
   },
   __hmrId: 'BokehPass',
-};
+});
diff --git a/src/effects/EffectComposer.js b/src/effects/EffectComposer.js
index 6516f1b..195d08c 100644
--- a/src/effects/EffectComposer.js
+++ b/src/effects/EffectComposer.js
@@ -1,6 +1,7 @@
+import { defineComponent } from 'vue';
 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
 
-export default {
+export default defineComponent({
   setup() {
     return {
       passes: [],
@@ -37,4 +38,4 @@ export default {
     return this.$slots.default();
   },
   __hmrId: 'EffectComposer',
-};
+});
diff --git a/src/effects/EffectPass.js b/src/effects/EffectPass.js
index 82a4ced..4cf08e0 100644
--- a/src/effects/EffectPass.js
+++ b/src/effects/EffectPass.js
@@ -1,4 +1,6 @@
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   inject: ['three', 'passes'],
   emits: ['ready'],
   beforeMount() {
@@ -20,4 +22,4 @@ export default {
     return [];
   },
   __hmrId: 'EffectPass',
-};
+});
diff --git a/src/effects/FXAAPass.js b/src/effects/FXAAPass.js
index 3a69ffe..b48078b 100644
--- a/src/effects/FXAAPass.js
+++ b/src/effects/FXAAPass.js
@@ -1,8 +1,9 @@
+import { defineComponent } from 'vue';
 import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
 import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';
 import EffectPass from './EffectPass.js';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   mounted() {
     const pass = new ShaderPass(FXAAShader);
@@ -22,4 +23,4 @@ export default {
     },
   },
   __hmrId: 'FXAAPass',
-};
+});
diff --git a/src/effects/FilmPass.js b/src/effects/FilmPass.js
index 2c49018..ab055a9 100644
--- a/src/effects/FilmPass.js
+++ b/src/effects/FilmPass.js
@@ -1,25 +1,14 @@
+import { defineComponent } from 'vue';
 import { FilmPass } from 'three/examples/jsm/postprocessing/FilmPass.js';
 import EffectPass from './EffectPass.js';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   props: {
-    noiseIntensity: {
-      type: Number,
-      default: 0.5,
-    },
-    scanlinesIntensity: {
-      type: Number,
-      default: 0.05,
-    },
-    scanlinesCount: {
-      type: Number,
-      default: 4096,
-    },
-    grayscale: {
-      type: Number,
-      default: 0,
-    },
+    noiseIntensity: { type: Number, default: 0.5 },
+    scanlinesIntensity: { type: Number, default: 0.05 },
+    scanlinesCount: { type: Number, default: 4096 },
+    grayscale: { type: Number, default: 0 },
   },
   watch: {
     noiseIntensity() { this.pass.uniforms.nIntensity.value = this.noiseIntensity; },
@@ -32,4 +21,4 @@ export default {
     this.completePass(pass);
   },
   __hmrId: 'FilmPass',
-};
+});
diff --git a/src/effects/HalftonePass.js b/src/effects/HalftonePass.js
index 3da12e8..fc893c6 100644
--- a/src/effects/HalftonePass.js
+++ b/src/effects/HalftonePass.js
@@ -1,8 +1,8 @@
+import { defineComponent, watch } from 'vue';
 import { HalftonePass } from 'three/examples/jsm/postprocessing/HalftonePass.js';
-import { watch } from 'vue';
 import EffectPass from './EffectPass.js';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   props: {
     shape: { type: Number, default: 1 },
@@ -25,4 +25,4 @@ export default {
     this.completePass(pass);
   },
   __hmrId: 'HalftonePass',
-};
+});
diff --git a/src/effects/RenderPass.js b/src/effects/RenderPass.js
index c82875f..a3a45f5 100644
--- a/src/effects/RenderPass.js
+++ b/src/effects/RenderPass.js
@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue';
 import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
 import EffectPass from './EffectPass.js';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   mounted() {
     if (!this.three.scene) {
@@ -14,4 +15,4 @@ export default {
     this.completePass(pass);
   },
   __hmrId: 'RenderPass',
-};
+});
diff --git a/src/effects/SMAAPass.js b/src/effects/SMAAPass.js
index 06a70fd..4d45a21 100644
--- a/src/effects/SMAAPass.js
+++ b/src/effects/SMAAPass.js
@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue';
 import { SMAAPass } from 'three/examples/jsm/postprocessing/SMAAPass.js';
 import EffectPass from './EffectPass.js';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   mounted() {
     // three size is not set yet, but this pass will be resized by effect composer
@@ -9,4 +10,4 @@ export default {
     this.completePass(pass);
   },
   __hmrId: 'SMAAPass',
-};
+});
diff --git a/src/effects/SSAOPass.js b/src/effects/SSAOPass.js
index ba625a0..ed6d919 100644
--- a/src/effects/SSAOPass.js
+++ b/src/effects/SSAOPass.js
@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue';
 import { SSAOPass } from 'three/examples/jsm/postprocessing/SSAOPass.js';
 import EffectPass from './EffectPass.js';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   props: {
     scene: null,
@@ -26,4 +27,4 @@ export default {
     this.completePass(pass);
   },
   __hmrId: 'SSAOPass',
-};
+});
diff --git a/src/effects/TiltShiftPass.js b/src/effects/TiltShiftPass.js
index bc9167b..0ec41f3 100644
--- a/src/effects/TiltShiftPass.js
+++ b/src/effects/TiltShiftPass.js
@@ -1,11 +1,11 @@
+import { defineComponent, watch } from 'vue';
 import { Vector2 } from 'three';
 import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
-import { watch } from 'vue';
 import EffectPass from './EffectPass.js';
 import TiltShift from '../shaders/TiltShift.js';
 import { bindProp } from '../tools';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   props: {
     blurRadius: { type: Number, default: 10 },
@@ -54,4 +54,4 @@ export default {
     },
   },
   __hmrId: 'TiltShiftPass',
-};
+});
diff --git a/src/effects/UnrealBloomPass.js b/src/effects/UnrealBloomPass.js
index 83a4006..862df34 100644
--- a/src/effects/UnrealBloomPass.js
+++ b/src/effects/UnrealBloomPass.js
@@ -1,8 +1,9 @@
+import { defineComponent } from 'vue';
 import { Vector2 } from 'three';
 import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
 import EffectPass from './EffectPass.js';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   props: {
     strength: { type: Number, default: 1.5 },
@@ -20,4 +21,4 @@ export default {
     this.completePass(pass);
   },
   __hmrId: 'UnrealBloomPass',
-};
+});
diff --git a/src/effects/ZoomBlurPass.js b/src/effects/ZoomBlurPass.js
index b6786af..6c8c177 100644
--- a/src/effects/ZoomBlurPass.js
+++ b/src/effects/ZoomBlurPass.js
@@ -1,9 +1,10 @@
+import { defineComponent } from 'vue';
 import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
 import EffectPass from './EffectPass.js';
 import ZoomBlur from '../shaders/ZoomBlur.js';
 import { bindProp } from '../tools';
 
-export default {
+export default defineComponent({
   extends: EffectPass,
   props: {
     center: { type: Object, default: { x: 0.5, y: 0.5 } },
@@ -19,4 +20,4 @@ export default {
     this.completePass(pass);
   },
   __hmrId: 'ZoomBlurPass',
-};
+});