I've been experimenting with creating a Vue component using vue-class-component and TypeScript. I referenced the official documentation here: https://github.com/vuejs/vue-class-component. Despite defining the data within the class as shown below, I encountered the following error:
"[Vue warn]: Property or method "test" 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."
Below is a simplified version of my code snippet which still resulted in the same issue:
<template>
<div id="vue-test">
<input v-model="test"/>
{{test}}
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
@Component({
})
export default class AppearanceDialogVue extends Vue {
public test: string = '100';
}
</script>
UPDATE: Interestingly, simply changing the declaration of 'test' to
public test: string;
fixed the issue.