fix #9

package.json

@@ -9,13 +9,13 @@
   "dependencies": {
     "gsap": "^3.5.1",
     "three": "^0.125",
-    "vue": "3.0.5"
+    "vue": "^3.0.7"
   },
   "devDependencies": {
     "@rollup/plugin-buble": "^0.21.3",
     "@rollup/plugin-replace": "^2.3.3",
     "@vitejs/plugin-vue": "^1.1.4",
-    "@vue/compiler-sfc": "^3.0.5",
+    "@vue/compiler-sfc": "^3.0.7",
     "eslint": "^7.7.0",
     "eslint-config-airbnb-base": "^14.2.0",
     "eslint-config-standard": "^14.1.1",
@@ -27,7 +27,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^6.0.0-beta.10",
     "sass": "^1.26.10",
-    "vite": "^2.0.1"
+    "vite": "^2.0.5"
   },
   "main": "build/trois.js",
   "module": "build/trois.module.js",

src/lights/Light.js

@@ -1,15 +1,12 @@
 import { Color } from 'three';
-import { inject, watch } from 'vue';
+import { watch } from 'vue';
 import { setFromProp } from '../tools.js';
 import useBindProp from '../use/useBindProp.js';
 
 export default {
   inject: {
     scene: 'scene',
-    parent: {
-      from: 'group',
-      default: () => inject('scene'),
-    },
+    group: { default: null },
   },
   props: {
     color: {
@@ -29,6 +26,9 @@ export default {
   },
   // can't use setup because it will not be used in sub components
   // setup() {},
+  created() {
+    this.parent = this.group ? this.group : this.scene;
+  },
   mounted() {
     useBindProp(this, 'position', this.light.position);
 

src/meshes/Mesh.js

@@ -1,5 +1,5 @@
 import { Mesh } from 'three';
-import { inject, watch } from 'vue';
+import { watch } from 'vue';
 import useBindProp from '../use/useBindProp.js';
 
 export default {
@@ -7,10 +7,7 @@ export default {
     three: 'three',
     scene: 'scene',
     rendererComponent: 'rendererComponent',
-    parent: {
-      from: 'group',
-      default: () => inject('scene'),
-    },
+    group: { default: null },
   },
   emits: ['ready'],
   props: {
@@ -25,17 +22,18 @@ export default {
   },
   // can't use setup because it will not be used in sub components
   // setup() {},
+  created() {
+    this.parent = this.group ? this.group : this.scene;
+  },
   provide() {
     return {
       mesh: this,
     };
   },
   mounted() {
-    // console.log('Mesh mounted');
     if (this.geometry && !this.mesh) this.initMesh();
   },
   unmounted() {
-    // console.log('Mesh unmounted');
     if (this.mesh) {
       this.three.removeIntersectObject(this.mesh);
       this.parent.remove(this.mesh);