VueJS: Updating data based on query variable

Question

In my route I have a parameter like: ?id=101

And I have some data like:

data () {
  return {
   record: {id: null}
  }
}

Now, what I want to do this: if the query parameter is present, I want to update the id in the data with the id in the query variable. I tried doing this in the fetch, as follows:

async fetch ({ store, redirect, params, query }) {
  this.record = {id: query.id}
}

However, nothing happens. I also tried calling a function from the fetch , but it says the method was not defined.

Can you please help?

Answer 1

Ok my answer got deleted. Find the answer below:

export default {
  data () {
    return {
      record: {
        id: null
      }
    }
  },
  created () {
    this.fetchData()
  },
  watch: {
    '$route': 'fetchData'
  },
  methods: {
    fetchData () {
      getRecord(this.$route.query.id, (err, id) => {
        if (err) {
          this.error = err.toString()
        } else {
          this.record.id = id
        }
      })
    }
  }
}

More info here:

https://router.vuejs.org/guide/advanced/data-fetching.html