Vuex state change does not trigger reactivity on the page

Question

I'm making a captcha component using vue. I try to fetch the captcha when the component created. When I do this in a async manner, the page will not be reactive, although the state has already been updated. But I when do it in sync manner, everything is fine. So, I'm wondering why async manner won't work?

This works

<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>

This does not work

<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>