Изменение состояния Vuex не вызывает реактивности на странице

Question

Я делаю компонент капчи, используя vue. Я пытаюсь получить капчу, когда компонент создан. Когда я делаю это асинхронно, страница не будет реагирующей, хотя состояние уже обновлено. Но я, когда делаю это синхронно, все нормально. Итак, мне интересно, почему не работает асинхронный способ?

Это работает

<template>
  <section>
    <div class="captcha-container">
      <div v-if="captcha" v-html="captcha.data"></div>
    </div>
  </section>
</template>

<script>
import { mapState, mapActions } from "Vuex";

export default {
  created: function() {
    this.$store.commit('setCaptcha', {id: 'xx', data:'Hi'});
  },
  computed: {
    ...mapState(["captcha"])
  },
};
</script>

Это не работает

<template>
  <section>
    <div class="captcha-container">
      <div v-if="captcha" v-html="captcha.data"></div>
    </div>
  </section>
</template>

<script>
import { mapState, mapActions } from "Vuex";

export default {
  created: function() {
    setTimeout(() => {
      this.$store.commit('setCaptcha', {id: 'xx', data:'Hi'});
    }, 1000);
  },
  computed: {
    ...mapState(["captcha"])
  },
};
</script>