VuexのState変更をGettersで即時反映させたい

VuexのStateデータをGettersで取得し、親VueのHTMLに表示させています。
複数の子Vueで変更して表示させるために、VuexのStateを変更すれば、親Vueの表示文字が変更されるようにしています。
親Vueでは、VuexのGetters関数をそのまま、{{ getMessage }}と記載し表示しています。

ただ、子Vueで「tensorflowのModel定義とCompile」を実施させると、該当処理が終わるまで数秒も親Vueの表示が変更されません。
StoreでConsole．logを見るとStateのデータはすぐに変更されているように表示されますが、親VueでStateの変更が即時反映されずにGetters関数が働いていないように見えています。

親VueでVuexのState変更を即事Gettersで認識できる方法をご教授をお願いします。
（子Vueから何かしらのプッシュできるような方法でもあればお願いします。）

バージョンを調べて見たら以下でした。
npm vue --version
=> 6.14.2
npm vuex --version
=> 6.14.2

//******** 親Vue ********
<template>
  <div id="app">
    <h1>{{ getMessage }}</h1>
  </div>
</template>

<script>
computed: {
  ...mapGetters([ 'getMessage' ])
}
</script>

//******** 子Vue ********
<script>
method: {
  setMessage () {
    this.$store.dispatch('setMessage', 'すぐにメッセージを表示したい。')
    ★★★★★データなどの重い処理★★★★★
  }
}
</script>

//******** Vuex Storeコード ********
<script>
state: {
  dispMessage: ''
},
getters: {
  getMessage (state) {
    return state.dispMessage
  }
},
mutation: {
  [SET_MESSAGE] (state, payload) {
    state.dispMessage = payload
    console.log('SET_MESSAGE:' + payload)
  }
}
</script>

tensorflowのModel定義とCompile

const model = tf.sequential()
model.add(tf.layers.conv2d({
  inputShape: [this.height, this.width, 3],
  kernelSize: 3,
  filters: 32,
  activation: 'relu'
}))
model.add(tf.layers.conv2d({kernelSize: 3, filters: 64, activation: 'relu'}))
model.add(tf.layers.maxPooling2d({poolSize: 2, strides: 2}))
model.add(tf.layers.dropout(0.25))
model.add(tf.layers.flatten())
model.add(tf.layers.dense({units: 128, activation: 'relu'}))
model.add(tf.layers.dropout(0.5))
model.add(tf.layers.dense({units: this.output_classes, activation: 'softmax'}))
const optimizer = tf.train.adadelta()
model.compile({
  optimizer: optimizer,
  loss: 'categoricalCrossentropy',
  metrics: ['accuracy']
})
return model