Nuxt async fetch() doesn't update component property-CodePudding

I have a component that works perfectly with asyncData(), but i want to use fetch() instead. The problem is that when using fetch method, 'car' property is never updated. Am i missing something?

Doesn't work:

data() {
  return {
    car: null,
  }
},
async fetch({ $axios, route }) {
  this.car = await $axios.$get('/cars/'   route.params.id)
},

Works perfectly:

data() {
  return {
    car: null,
  }
},
async asyncData({ $axios, route }) {
  const response = await $axios.$get('/cars/'   route.params.id)
  return { car: response.data }
},

CodePudding user response：

If you use the fetch hook with something like fetch({ ... }), you'll be using the old fetch() hook.

If you want it to work, try out rather

async fetch() {
  this.car = await this.$axios.$get(`/cars/${this.$route.params.id}`)
},

As confirmed in this github issue.