Property or method "mesh" is not defined

[sylwesterdigital]

Apologies if this is low level question but I have a Vue project and I would like to implement your module to use ThreeJS inside. What I have done

1. I placed to my main.js

import * as VueThreejs from 'vue-threejs' // >= 0.2.0
Vue.use(VueThreejs)

2. I've created Test.vue

<template>
  <renderer :size="{ w: 600, h: 400 }">
    <scene>
      <camera :position="{ z: 15 }"></camera>
      <mesh :obj="mesh" :position="{ y: -200 }"></mesh>
      <animation :fn="animate" :speed="3"></animation>
    </scene>
  </renderer>
</template>

<script>


  export default {
    data() {
      return {
        test: "test from data"
      }
    },
    methods: {},
    components: {}
  }
</script>

<style scoped>
</style>

In chrome console I have errors:

[Vue warn]: Property or method "mesh" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. S

and infinite times iterations error:

VueThreejs.common.js:5259 Uncaught TypeError: this.fn is not a function
    at VueComponent.begin

To be honest I have no idea how to use your module. Can you advice what is missing?

[fritx]

@sylwesterdigital hi, this is Vue-level stuffs..

If being referenced, mesh, fn should be defined in their Vue instances like

export default {
  data () {
    return {
      mesh: new THREE.Mesh(geometry, material)  // Three.js-level stuffs
      fn: () => { console.log(1) }
    }
  }
}