Why do not have time to load the data in the state?

Question

Vue.js

There is an asynchronous action that causes a mutation and updates the state data

actions: {
    async fetchData ({commit}) {
      await axios.get('apiurl')
          .then(response => {
            commit('setData', response.data)
          })
    }
  }

In component do (component NOT main.js)

computed: {
    ...mapState(['data'])
  },
  methods: {
    ...mapActions(['fetchData'])
  },
  created () {
    if (!this.data) {
       this.fetchData()
      console.log(this.data) //undefined
    }
  }

At this stage, this.data does not have time to load. Tell me how to wait for the data correctly and why this happens.

Answer 1

actions: {
  fetchData({commit}) {
    return axios.get('apiurl').then(response => {
      commit('setData', response.data)
    })
  }
}

computed: {
  ...mapState(['data'])
},
methods: {
  ...mapActions(['fetchData'])
},
async created () {
  if (!this.data) {
    await this.fetchData();
    console.log(this.data)
  }
}