VueとVuexのデータの受け渡しのタイミングを操作したい

今個人でJavaとVueを使ってクイズを作っています。
繋ぎこみも終わって問題も出力できていますが、一番最初の解答の時だけ、Answer.vueのgetAnswerメソッドが動かないです。
vuexからデータを受け取る前に画面処理が終わっているからだと思いますが、どうやって解決したらいいかわかりません。

解決法を教えていただきたいです。
よろしくお願いいたします。

以下コードがその場面で使用しているコードになります。

Question.vue
<template>
  <div v-if="loaded" class="question">
    <h1>問題{{ isCounted() }}</h1>
    <p class="question">
      {{ selectQuestion }}
    </p>
    <router-link to="/answer">
      <button @click="answer(selectAnswer1)">
        {{ selectAnswer1 }}
      </button>
    </router-link>
    <router-link to="/answer">
      <button @click="answer(selectAnswer2)">
        {{ selectAnswer2 }}
      </button>
    </router-link>
    <router-link to="/answer">
      <button @click="answer(selectAnswer3)">
        {{ selectAnswer3 }}
      </button>
    </router-link>
    <router-link to="/answer">
      <button @click="answer(selectAnswer4 )">
        {{ selectAnswer4 }}
      </button>
    </router-link>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  computed: {
    selectQuestion () {
      return this.$store.state.question.contents.questionStatement
    },
    selectAnswer1 () {
      return this.$store.state.question.contents.answer1
    },
    selectAnswer2 () {
      return this.$store.state.question.contents.answer2
    },
    selectAnswer3 () {
      return this.$store.state.question.contents.answer3
    },
    selectAnswer4 () {
      return this.$store.state.question.contents.answer4
    },
    loaded () {
      return this.$store.state.question.loaded
    }
  },
  methods: {
    answer (answer) {
      const selectedAnswer = answer
      const questionId = this.$store.state.question.contents.id
      console.log('回答は' + selectedAnswer)
      // 正解と解説をDBから持ってくる
      this.$store.dispatch('getAnswer', questionId)

      // 次の画面に回答した答えを持っていく
      this.$store.commit('getAnswer', selectedAnswer)
    },
    // 何回問題を解いたかを数える
    isCounted () {
      this.count = this.$store.state.question.count
      return this.count
    }
  }
}
</script>

Answer.js
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default {
  state: {
    contents: {},
    loaded: false,
    correctCount: 0,

    // 画面で回答した値を受け取る箱
    answer: ''
  },
  mutations: {
    // DBからデータを受け取る時に動く
    answer (state, payload) {
      state.contents = payload
      state.loaded = true
    },
    // 画面で選択された解答を受け取る
    getAnswer (state, payload) {
      state.answer = payload
    },
    // 正解数を数える
    addCount (state) {
      state.correctCount++
    }
  },
  actions: {
    // APIと接続する（答えと解説を持ってくる）
    async getAnswer ({ commit }, questionId) {
      const url = '/api/answer/' + questionId
      await axios.get(url)
        .then(res => commit('answer', res.data))
    }
  }
}

Answer.vue
<template>
  <div v-if="loaded" class="answer">
    <h1 v-if="answerShow" class="true">
      正解!
    </h1>
    <h1 v-if="!answerShow" class="false">
      不正解・・・
    </h1>
    <h1 class="answer">
      正解：{{ correctAnswers }}
    </h1>
    <h2>
      解説：{{ selectExplain }}
    </h2>
    <div>
      <router-link to="/question" class="btn_to_question">
        <button v-if="show" @click="question()">
          次の問題へ
        </button>
      </router-link>
      <router-link to="/results" class="btn_to_question">
        <button v-if="!show" @click="question()">
          結果画面へ
        </button>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: true,
      answerShow: true,
      correctAnswer: ' ',
      answer: ' '
    }
  },
  computed: {
    correctAnswers () {
      return this.$store.state.answer.contents[0].correctAnswer
    },
    selectExplain () {
      return this.$store.state.answer.contents[0].explanation
    },
    loaded () {
      return this.$store.state.answer.loaded
    }
  },
  created: function asyncCall () {
    this.asyncCall()
    this.isShow()
  },

  methods: {
    // 次の問題を出力する
    question () {
      this.$store.dispatch('getQuestion')
    },
    // 全ての問題を回答したらボタンを入れ替える
    isShow () {
      const count = this.$store.state.question.count
      if (count % 5 === 0) {
        this.show = !this.show
      }
    },
    // async asyncCall () {
    //   console.log('calling')
    //   const result = await this.getAnswer()
    //   console.log(result)
    // },

    // 正解かどうかを判断し、正解ならばカウントする
    getAnswer () {
      this.correctAnswer = this.$store.state.answer.contents[0].correctAnswer
      this.answer = this.$store.state.answer.answer
      // await isCount()
      // const isCount = () => {
      if (this.correctAnswer !== this.answer) {
        this.answerShow = false
      } else {
        this.answerShow = true
        this.$store.commit('addCount')
      }
      // }
    }
  }
}
</script>

<style scoped>
.answer {
  background-color: #FF9999;
}
</style>

行動規範の内容に同意します

回答1件

this.$store.dispatch('getAnswer', questionId) が非同期処理ですが、結果を待たずに次の処理に進むようになっています

Answer.vueのanswerメソッドをasyncで囲ってあげて
this.$store.dispatch('getAnswer', questionId)の終了をawaitで待ってあげれば動きそうです

javascript
1// asyncを追加
2async answer (answer) {
3      const selectedAnswer = answer
4      const questionId = this.$store.state.question.contents.id
5      console.log('回答は' + selectedAnswer)
6      // 正解と解説をDBから持ってくる
7      // awaitを追加
8      await this.$store.dispatch('getAnswer', questionId)
9
10      // 次の画面に回答した答えを持っていく
11      this.$store.commit('getAnswer', selectedAnswer)
12    }