title: Vuex state change does not trigger reactivity on the page
body: <p>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?</p>
  
  <h2>This works</h2>
  
  <pre><code>&lt;template&gt;
    &lt;section&gt;
      &lt;div class="captcha-container"&gt;
        &lt;div v-if="captcha" v-html="captcha.data"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapState, mapActions } from "Vuex";
  
  export default {
    created: function() {
      this.$store.commit('setCaptcha', {id: 'xx', data:'Hi'});
    },
    computed: {
      ...mapState(["captcha"])
    },
  };
  &lt;/script&gt;
  </code></pre>
  
  <h2>This does not work</h2>
  
  <pre><code>&lt;template&gt;
    &lt;section&gt;
      &lt;div class="captcha-container"&gt;
        &lt;div v-if="captcha" v-html="captcha.data"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapState, mapActions } from "Vuex";
  
  export default {
    created: function() {
      setTimeout(() =&gt; {
        this.$store.commit('setCaptcha', {id: 'xx', data:'Hi'});
      }, 1000);
    },
    computed: {
      ...mapState(["captcha"])
    },
  };
  &lt;/script&gt;
  </code></pre>