title: Vuejs Vuex component not updated when store change
body: <p>I want to activate / desactivate a simple spinner.</p>
  
  <p>I've create a store to handle the state of the spinner :</p>
  
  <pre><code>const spinnerStore = {
    state: {
      isActive: false
    },
  
    mutations: {
      startSpinner: function (state) {
        console.log('start');
        state.isActive = true
      },
  
      stopSpinner: function (state) {
        console.log('stop');
        state.isActive = false
      }
    },
  
    actions: {
      startSpinner: function ({commit}) {
        commit('startSpinner');
      },
  
      stopSpinner: function ({commit}) {
        commit('stopSpinner');
      }
    }
  }
  
  const store = new Vuex.Store({
      modules: {
          'mapEditor': mapEditorStore,
          'spinner': spinnerStore
      }
  });
  </code></pre>
  
  <p>And I create a Vue to handle the view.</p>
  
  <pre><code>&lt;script type="x-template" id="vueSpinnerTemplate"&gt;
    &lt;div class="mdl-spinner mdl-js-spinner mdl-spinner--single-color" style="position: absolute; bottom: 50px; right: 50px; z-index: 10" v-bind:class="{'is-active': isActive}"&gt; &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;script&gt;
  
  var vm = new Vue({
  
      store,
  
      template: '#vueSpinnerTemplate',
  
      computed: {
          isActive: function () {
              console.log('called');
              return this.$store.state.spinner.isActive
          }
      }
  }).$mount('#spinner-mount-point');
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Vue.use(Vuex) is called somewhere because I have this message when I try this line :
  <code>
  [vuex] already installed. Vue.use(Vuex) should be called only once.
  </code>
  If I set in the store the default value to <code>true</code> I see my spinner so the html/template is ok.</p>
  
  <p>In my code, I use Jquery to make an async request, and I want my spinner to show up so I use :</p>
  
  <pre><code>store.dispatch('startSpinner');
  $.ajax({
    url : "myUrl", 
    success: function (data) {
        store.dispatch('stopSpinner'); 
    }
  });
  </code></pre>
  
  <p>Unfortanutelly, I can't see the spinner showing up. (My request takes 2 secondes)</p>
  
  <p>So I looked in the console and I see : </p>
  
  <p>called
  start
  stop
  called</p>
  
  <p>That mean that the component didn't call isActive between start and stop.</p>
  
  <p>How to fix that</p>
  
  <p>Thanks</p>
  
  <p>Edit: I've a beggining of solution.</p>
  
  <p>My ajax request is synchrone. I think it block the component to render or something like that... When I put <code>async: true</code> can see the spinner </p>