nuxt class component. async fetch dont work - vue-component

Question

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
#Component
export default class Index extends Vue {
form = {
name: '',
adress: '',
age: '',
items: [],
}
async fetch() {
this.form.items = await fetch('https://api.nuxtjs.dev/posts').then(c => c.json())
console.log(this.form.items)
}
fetchOnServer = true;
changeLanguage(language: string) {
this.$i18n.setLocale(language);
}
}
</script>
async fetch dont work in class component
If I use a standard component it works fine. But if I use a class component, the function call stops working.
What is the problem and how can it be fixed

Answer 1

As an annotation argument it works
#Component({
components: {ValidationProvider, ValidationObserver},
async fetch() {
console.log('** fetch at ');
console.log(this.$route);
await new Promise((resolve) => {
setTimeout(resolve, 1000);
});
}
})
export default class xrayClient extends Vue {
As class methods created() works:
async created() {
console.log('** created ');
console.log(this.$route);
await new Promise((resolve) => {
setTimeout(resolve, 1000);
});
Mounted() works:
async mounted() {
console.log('** mounted ' + this.data);
await new Promise((resolve) => {
setTimeout(resolve, 1000);
});
}
Calling
async asyncData()
and
fetch() {
Don't run.
"nuxt": "^2.15.7",

Answer 2

Instead of vue-property-decorator, you should use nuxt-property-decorator.
Then you can specify your asyncData or fetch methods in the component options, like this:
<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'
#Component({
async fetch() {
this.form.items = await fetch('https://api.nuxtjs.dev/posts').then(c => c.json())
console.log(this.form.items)
}
})
export default class Index extends Vue {
form = {
name: '',
adress: '',
age: '',
items: [],
}
changeLanguage(language: string) {
this.$i18n.setLocale(language);
}
}
</script>
See this GitHub issue comment for details: https://github.com/nuxt/nuxt.js/issues/5330#issuecomment-475595112