diff --git a/src/meshes/Box.js b/src/meshes/Box.js
index 4d528eb..9b72f52 100644
--- a/src/meshes/Box.js
+++ b/src/meshes/Box.js
@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/BoxGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Box',
-};
+export default meshComponent('Box', props, createGeometry);
diff --git a/src/meshes/Circle.js b/src/meshes/Circle.js
index 67393b0..8baceb2 100644
--- a/src/meshes/Circle.js
+++ b/src/meshes/Circle.js
@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/CircleGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Circle',
-};
+export default meshComponent('Circle', props, createGeometry);
diff --git a/src/meshes/Cone.js b/src/meshes/Cone.js
index 8c8e692..8919e86 100644
--- a/src/meshes/Cone.js
+++ b/src/meshes/Cone.js
@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/ConeGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Cone',
-};
+export default meshComponent('Cone', props, createGeometry);
diff --git a/src/meshes/Cylinder.js b/src/meshes/Cylinder.js
index f258f4e..762a545 100644
--- a/src/meshes/Cylinder.js
+++ b/src/meshes/Cylinder.js
@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/CylinderGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Cylinder',
-};
+export default meshComponent('Cylinder', props, createGeometry);
diff --git a/src/meshes/Dodecahedron.js b/src/meshes/Dodecahedron.js
index 95c8303..1ad3e6a 100644
--- a/src/meshes/Dodecahedron.js
+++ b/src/meshes/Dodecahedron.js
@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/DodecahedronGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Dodecahedron',
-};
+export default meshComponent('Dodecahedron', props, createGeometry);
diff --git a/src/meshes/Gem.js b/src/meshes/Gem.js
index 47c3c49..1e77bc8 100644
--- a/src/meshes/Gem.js
+++ b/src/meshes/Gem.js
@@ -1,3 +1,4 @@
+import { defineComponent } from 'vue';
 import {
   BackSide,
   CubeCamera,
@@ -10,7 +11,7 @@ import {
 import Mesh from './Mesh.js';
 import { bindProp } from '../tools';
 
-export default {
+export default defineComponent({
   extends: Mesh,
   props: {
     cubeRTSize: { type: Number, default: 256 },
@@ -69,4 +70,4 @@ export default {
     },
   },
   __hmrId: 'Gem',
-};
+});
diff --git a/src/meshes/Icosahedron.js b/src/meshes/Icosahedron.js
index 9d4f1bc..e687b67 100644
--- a/src/meshes/Icosahedron.js
+++ b/src/meshes/Icosahedron.js
@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/IcosahedronGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Icosahedron',
-};
+export default meshComponent('Icosahedron', props, createGeometry);
diff --git a/src/meshes/Image.js b/src/meshes/Image.js
index 184d0e2..34dd502 100644
--- a/src/meshes/Image.js
+++ b/src/meshes/Image.js
@@ -1,8 +1,8 @@
+import { defineComponent, watch } from 'vue';
 import { DoubleSide, MeshBasicMaterial, PlaneGeometry, TextureLoader } from 'three';
-import { watch } from 'vue';
 import Mesh from './Mesh.js';
 
-export default {
+export default defineComponent({
   emits: ['loaded'],
   extends: Mesh,
   props: {
@@ -66,4 +66,4 @@ export default {
     },
   },
   __hmrId: 'Image',
-};
+});
diff --git a/src/meshes/InstancedMesh.js b/src/meshes/InstancedMesh.js
index 538852c..1172d40 100644
--- a/src/meshes/InstancedMesh.js
+++ b/src/meshes/InstancedMesh.js
@@ -1,9 +1,10 @@
+import { defineComponent } from 'vue';
 import { InstancedMesh } from 'three';
 import Object3D from '../core/Object3D';
 import { bindProp } from '../tools';
 import { pointerProps } from './Mesh';
 
-export default {
+export default defineComponent({
   extends: Object3D,
   props: {
     castShadow: Boolean,
@@ -60,4 +61,4 @@ export default {
     }
   },
   __hmrId: 'InstancedMesh',
-};
+});
diff --git a/src/meshes/Lathe.js b/src/meshes/Lathe.js
index 904e16b..b54e38e 100644
--- a/src/meshes/Lathe.js
+++ b/src/meshes/Lathe.js
@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/LatheGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Lathe',
-};
+export default meshComponent('Lathe', props, createGeometry);
diff --git a/src/meshes/Mesh.js b/src/meshes/Mesh.js
index b07ce6b..f25bf85 100644
--- a/src/meshes/Mesh.js
+++ b/src/meshes/Mesh.js
@@ -1,5 +1,5 @@
-import { watch } from 'vue';
-import { Mesh } from 'three';
+import { defineComponent, watch } from 'vue';
+import { Mesh as TMesh } from 'three';
 import Object3D from '../core/Object3D.js';
 import { bindProp } from '../tools';
 
@@ -13,7 +13,7 @@ export const pointerProps = {
   onClick: Function,
 };
 
-export default {
+const Mesh = defineComponent({
   name: 'Mesh',
   extends: Object3D,
   props: {
@@ -33,7 +33,7 @@ export default {
   },
   methods: {
     initMesh() {
-      this.mesh = new Mesh(this.geometry, this.material);
+      this.mesh = new TMesh(this.geometry, this.material);
       this.mesh.component = this;
 
       bindProp(this, 'castShadow', this.mesh);
@@ -81,4 +81,24 @@ export default {
     if (this.geometry) this.geometry.dispose();
   },
   __hmrId: 'Mesh',
+});
+
+export default Mesh;
+
+export function meshComponent(name, props, createGeometry) {
+  return defineComponent({
+    name,
+    extends: Mesh,
+    props,
+    created() {
+      this.createGeometry();
+      this.addGeometryWatchers(props);
+    },
+    methods: {
+      createGeometry() {
+        this.geometry = createGeometry(this);
+      },
+    },
+    __hmrId: name,
+  });
 };
diff --git a/src/meshes/MirrorMesh.js b/src/meshes/MirrorMesh.js
index 0d2cda6..99a2edf 100644
--- a/src/meshes/MirrorMesh.js
+++ b/src/meshes/MirrorMesh.js
@@ -1,3 +1,4 @@
+import { defineComponent } from 'vue';
 import {
   CubeCamera,
   LinearMipmapLinearFilter,
@@ -6,7 +7,7 @@ import {
 } from 'three';
 import Mesh from './Mesh.js';
 
-export default {
+export default defineComponent({
   extends: Mesh,
   props: {
     cubeRTSize: { type: Number, default: 256 },
@@ -39,4 +40,4 @@ export default {
     },
   },
   __hmrId: 'MirrorMesh',
-};
+});
diff --git a/src/meshes/Octahedron.js b/src/meshes/Octahedron.js
index 66effad..7354120 100644
--- a/src/meshes/Octahedron.js
+++ b/src/meshes/Octahedron.js
@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/OctahedronGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Octahedron',
-};
+export default meshComponent('Octahedron', props, createGeometry);
diff --git a/src/meshes/Plane.js b/src/meshes/Plane.js
index fdb27e7..286cfc7 100644
--- a/src/meshes/Plane.js
+++ b/src/meshes/Plane.js
@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/PlaneGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Plane',
-};
+export default meshComponent('Plane', props, createGeometry);
diff --git a/src/meshes/Polyhedron.js b/src/meshes/Polyhedron.js
index 6bbe044..d8bed07 100644
--- a/src/meshes/Polyhedron.js
+++ b/src/meshes/Polyhedron.js
@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/PolyhedronGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Polyhedron',
-};
+export default meshComponent('Polyhedron', props, createGeometry);
diff --git a/src/meshes/RefractionMesh.js b/src/meshes/RefractionMesh.js
index 56d28fb..ceb0a45 100644
--- a/src/meshes/RefractionMesh.js
+++ b/src/meshes/RefractionMesh.js
@@ -1,3 +1,4 @@
+import { defineComponent } from 'vue';
 import {
   CubeCamera,
   CubeRefractionMapping,
@@ -8,7 +9,7 @@ import {
 import Mesh from './Mesh.js';
 import { bindProp } from '../tools';
 
-export default {
+export default defineComponent({
   extends: Mesh,
   props: {
     cubeRTSize: { type: Number, default: 256 },
@@ -44,4 +45,4 @@ export default {
     },
   },
   __hmrId: 'RefractionMesh',
-};
+});
diff --git a/src/meshes/Ring.js b/src/meshes/Ring.js
index 98a043b..7358c89 100644
--- a/src/meshes/Ring.js
+++ b/src/meshes/Ring.js
@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/RingGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Ring',
-};
+export default meshComponent('Ring', props, createGeometry);
diff --git a/src/meshes/Sphere.js b/src/meshes/Sphere.js
index 6794275..2fcd0d5 100644
--- a/src/meshes/Sphere.js
+++ b/src/meshes/Sphere.js
@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/SphereGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Sphere',
-};
+export default meshComponent('Sphere', props, createGeometry);
diff --git a/src/meshes/Sprite.js b/src/meshes/Sprite.js
index 3093902..af6b2b9 100644
--- a/src/meshes/Sprite.js
+++ b/src/meshes/Sprite.js
@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue';
 import { Sprite, SpriteMaterial, TextureLoader } from 'three';
 import Object3D from '../core/Object3D.js';
 
-export default {
+export default defineComponent({
   extends: Object3D,
   emits: ['loaded'],
   props: {
@@ -50,4 +51,4 @@ export default {
     },
   },
   __hmrId: 'Sprite',
-};
+});
diff --git a/src/meshes/Tetrahedron.js b/src/meshes/Tetrahedron.js
index 8cff6e7..08b9ad5 100644
--- a/src/meshes/Tetrahedron.js
+++ b/src/meshes/Tetrahedron.js
@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/TetrahedronGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Tetrahedron',
-};
+export default meshComponent('Tetrahedron', props, createGeometry);
diff --git a/src/meshes/Text.js b/src/meshes/Text.js
index ddf3b23..67ead70 100644
--- a/src/meshes/Text.js
+++ b/src/meshes/Text.js
@@ -1,13 +1,25 @@
+import { defineComponent, watch } from 'vue';
 import { FontLoader, TextGeometry } from 'three';
-import { watch } from 'vue';
 import Mesh from './Mesh.js';
-import TextProps from './TextProps.js';
 
-export default {
+const props = {
+  text: String,
+  fontSrc: String,
+  size: { type: Number, default: 80 },
+  height: { type: Number, default: 5 },
+  depth: { type: Number, default: 1 },
+  curveSegments: { type: Number, default: 12 },
+  bevelEnabled: { type: Boolean, default: false },
+  bevelThickness: { type: Number, default: 10 },
+  bevelSize: { type: Number, default: 8 },
+  bevelOffset: { type: Number, default: 0 },
+  bevelSegments: { type: Number, default: 5 },
+  align: { type: [Boolean, String], default: false },
+};
+
+export default defineComponent({
   extends: Mesh,
-  props: {
-    ...TextProps,
-  },
+  props,
   data() {
     return {
       loading: true,
@@ -54,4 +66,4 @@ export default {
       }
     },
   },
-};
+});
diff --git a/src/meshes/TextProps.js b/src/meshes/TextProps.js
deleted file mode 100644
index 104dac7..0000000
--- a/src/meshes/TextProps.js
+++ /dev/null
@@ -1,14 +0,0 @@
-export default {
-  text: String,
-  fontSrc: String,
-  size: { type: Number, default: 80 },
-  height: { type: Number, default: 5 },
-  depth: { type: Number, default: 1 },
-  curveSegments: { type: Number, default: 12 },
-  bevelEnabled: { type: Boolean, default: false },
-  bevelThickness: { type: Number, default: 10 },
-  bevelSize: { type: Number, default: 8 },
-  bevelOffset: { type: Number, default: 0 },
-  bevelSegments: { type: Number, default: 5 },
-  align: { type: [Boolean, String], default: false },
-};
diff --git a/src/meshes/Torus.js b/src/meshes/Torus.js
index e697a93..6178f40 100644
--- a/src/meshes/Torus.js
+++ b/src/meshes/Torus.js
@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/TorusGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'Torus',
-};
+export default meshComponent('Torus', props, createGeometry);
diff --git a/src/meshes/TorusKnot.js b/src/meshes/TorusKnot.js
index cf2d1a1..0611c16 100644
--- a/src/meshes/TorusKnot.js
+++ b/src/meshes/TorusKnot.js
@@ -1,17 +1,4 @@
-import Mesh from './Mesh.js';
+import { meshComponent } from './Mesh.js';
 import { props, createGeometry } from '../geometries/TorusKnotGeometry.js';
 
-export default {
-  extends: Mesh,
-  props,
-  created() {
-    this.createGeometry();
-    this.addGeometryWatchers(props);
-  },
-  methods: {
-    createGeometry() {
-      this.geometry = createGeometry(this);
-    },
-  },
-  __hmrId: 'TorusKnot',
-};
+export default meshComponent('TorusKnot', props, createGeometry);
diff --git a/src/meshes/Tube.js b/src/meshes/Tube.js
index 2a998c2..b93d757 100644
--- a/src/meshes/Tube.js
+++ b/src/meshes/Tube.js
@@ -1,7 +1,8 @@
+import { defineComponent } from 'vue';
 import Mesh from './Mesh.js';
 import { props, createGeometry, updateTubeGeometryPoints } from '../geometries/TubeGeometry.js';
 
-export default {
+export default defineComponent({
   extends: Mesh,
   props,
   created() {
@@ -18,4 +19,4 @@ export default {
     },
   },
   __hmrId: 'Tube',
-};
+});