"[Vue warn]: Error in data(): "Error"" - when using typescript components

[sebasijan]

Following the guide, but adjusing for vue 2 and typescript, I have the below setup, and it compiles fine but when I go to the page I see the 3 errors at the bottom.

After copy-pasting the guide example exactly it seems to work fine, but I'm wondering if it's possible to get it working in the below way (using Component, Prop, ts etc) ?

<template>
    <input ref="inputRef"
           :value="formattedValue"
           type="text" >
</template>

<script lang="ts">
    import { Vue, Component, Prop } from "vue-property-decorator";
    import useCurrencyInput from 'vue-currency-input'

    @Component({
        name: "CurrencyInput",
        components: {}
    })
    export default class CurrencyInput extends Vue {
        @Prop() value!: number;
        @Prop() options!: any;

        public formattedValue: string | null = null;
        public inputRef: any = null;

        constructor() {
            super();

            const { formattedValue, inputRef } = useCurrencyInput(this.options)

            this.inputRef = inputRef;
            this.formattedValue = formattedValue.value;
        }
    }
</script>

Calling normally like this:

<currency-input v-model="testValue" options="{ currency: 'EUR' }" />

Errors:

[Vue warn]: Error in data(): "Error"
found in
---> at wwwroot/components/util/currencyInput.vue

vue.js:1896 Error
at useCurrencyInput (index.esm.js:475)
at new CurrencyInput (currencyInput.vue:62)
at collectDataFromConstructor (vue-class-component.esm.js:168)
at VueComponent.data (vue-class-component.esm.js:230)
at getData (vue.js:4744)
at initData (vue.js:4701)
at initState (vue.js:4640)
at VueComponent.Vue._init (vue.js:4999)
at new CurrencyInput (vue.js:5146)
at createComponentInstanceForVnode (vue.js:3289)

vue.js:633 [Vue warn]: Property or method "formattedValue" 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. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> at wwwroot/components/util/currencyInput.vue

[dm4t2]

It seems the setup method needs to be a @Component option. See vuejs/composition-api#136

@Component({
  setup(props, context) {
    //...
  }
})
export default class CurrencyInput extends Vue {
  //...
}