Vuexのデータ格納が遅く、画面遷移後でも値の反映がされていない件

前提・実現したいこと

Vue.jsのVuexに関して質問です。
ページAからページBへの遷移するrouter-linkをクリックした際に、ストアにクリックされた要素のidを格納して、ページBでストアに格納したidでDBを叩く処理を実装しています。

発生している問題・エラーメッセージ

しかし、以下の様な動きをした際に上手く動きません。
①ページA→ページBへ移動
②ページB→ページAへ移動し、①とはidが違う要素をクリックしてページBへ移動
③ページBでストアを見ると、idが①の時に選択したままになっている。

該当のソースコード

pageA.vue
1        //pageA.vue
2        <div
3          v-for="(course, index) in courseList"
4          :key="index"
5          @click="selectCourse(course.id)"
6        >
7          <router-link to="/pageB">
8            <span class="left-column">{{course.place}}</span>
9            <span class="right-column">{{course.number}}</span>
10          </router-link>
11        </div>
12
13～～
14export default {
15～～
16    methods: {
17      selectCourse(id) {
18        // idをストアに格納
19        this.$store.commit('setId', id);
20      },
21    }
22  }
23

pageB.vue
1          //pageB.vue
2          <div v-for="(receiver, index) in receiverList" :key="index" @click="selectReceiver(index)">
3            <router-link to="/pageC">
4              <p class="left-column"> {{receiver.leave}}</p>
5              <p class="right-column">{{receiver.name}}</p>
6            </router-link>
7          </div>
8～～
9  computed : {
10    storeId() {
11      return this.$store.state.id;
12    },
13  },
14  created : function() {
15　　 // ストアID確認(手順③の時のログを見ると、①で選択したidのままになっている)
16    console.log("pageB-id")
17    console.log(this.storeId)
18
19    //ストアidでDB叩く処理
20～～
21
22

store.js
1//store.js
2
3export default new Vuex.Store({
4  strict: true,
5  state: {
6    // 選択したコースid
7    id: -1,
8
9  },
10  mutations: {
11    setId(state, id) {
12      state.id = id;
13      
14      //手順③の際にもidは格納されている、①のidは想定通り上書きされている。
15      console.log("storeId")
16      console.log(state.id)
17    },
18  },
19})