title: vuex store doesn't update component
body: <p>I'm new to vue, so I'm probably making a rookie error.</p>
  
  <p>I have a root vue element - raptor.js:</p>
  
  <pre><code>const Component = {
  el: '#app',
  store,
  data: {
      productList: store.state.productlist
  },
  beforeCreate: function () {
      return store.dispatch('getProductList', 'getTrendingBrands');
  },
  updated: function (){
      console.log(111);
      startSlider();
  }
  };
  const vm = new Vue(Component);
  </code></pre>
  
  <p>Using this template </p>
  
  <pre><code>&lt;div class="grid-module-single popular-products" id="app"&gt;
  &lt;div class="row"&gt;
      &lt;div class="popular-items-slick col-xs-12"&gt;
          &lt;div v-for="product in productList"&gt;
              ...
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>My store is very simple store/index.js:</p>
  
  <pre><code>import Vue from 'vue';
  import Vuex from 'vuex';
  import model from '../../utilities/model';
  
  Vue.use(Vuex);
  
  export default new Vuex.Store({
  state: {
      productlist: []
  },
  mutations: {
      setProductList(state, data) {
          state.productlist = data;
      }
  },
  actions: {
      getProductList({ commit }, action) {
          return model.products().then(data =&gt; commit('setProductList', data));
      }
  }
  });
  </code></pre>
  
  <p>In my vuex devtool, I can see, that the store is being updated
  <a href="https://www.screencast.com/t/UGbw7JyHS3" rel="noreferrer">https://www.screencast.com/t/UGbw7JyHS3</a></p>
  
  <p>but my component is not being updated:
  <a href="https://www.screencast.com/t/KhXQrePEd" rel="noreferrer">https://www.screencast.com/t/KhXQrePEd</a></p>
  
  <p><strong>Question:</strong></p>
  
  <p>I can see from the devtools, that my code is working. The store is being updated with data. My component is not being updated,however. I thought it was enough just to add this in the data property on the component:</p>
  
  <pre><code>data: {
      productList: store.state.productlist
  }
  </code></pre>
  
  <p>but apparently the data object doesn't seem to be automatically synced with the store. So either I'm doing a complete vue no-no somewhere, or I need to tweak the code a bit. Anyway can anyone help me in the right direction.</p>
  
  <p>Thanks a lot.</p>