Define mixin global does not work #83
Description
Hi all,
I tried creating a mixin in the Vue-Class-Component format like below:
import Vue from 'vue'
import Component from 'vue-class-component'
@Component()
export default class HelloMixins extends Vue{
helloMixinsData = 'Hello mixin class component!'
created() {
console.log('created: ', this.helloMixinsData)
}
}
And I try to use it in two ways:
Option 1: Register and use that mixin locally:
@Component({
// Register mixin locally
mixins:[HelloMixins]
})
export default class Parent extends Vue {
...
}
<template>
<div>{{helloMixinsData}}</div>
</template>
With this option, it works fine.
Option 2: Register and use that mixin globally:
// Register mixin globally
Vue.mixin(HelloMixins)
...
@Component({})
export default class Parent extends Vue {
...
}
<template>
<div>{{helloMixinsData}}</div>
</template>
With this option, it throws an error:
Property or method "helloMixinsData" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
Does anyone point out to me what the problem is?