title: Vuex, computed properties are not reactive
body: <p>I trying to have a state shared between some components (sub-components) that where each sub-combonent (and parent component) can update the shared property (store in vueX state).</p>
  
  <p>I have make a small "How to reproduce" here:</p>
  
  <pre><code>Vue.component('urlQueryComponent', {
    template: '&lt;div&gt;object: {{pathQuery}}&lt;/div&gt;',
    computed: {
      pathQuery () {
        return this.$store.state.urlQuery;
      }
    }
  })
  </code></pre>
  
  <p><a href="https://codepen.io/anon/pen/rvmLrZ?editors=1010" rel="nofollow noreferrer">https://codepen.io/anon/pen/rvmLrZ?editors=1010</a></p>
  
  <p>The problem it's when I update state in sub component, the changes are not handled.</p>
  
  <p>The VueX instance:</p>
  
  <pre><code>const store = new Vuex.Store({
    state: {
      urlQuery:  {
        path: '',
        query: {}
      }
    },
    mutations: {
      pushQuery: (state, type) =&gt; {
        state.urlQuery.query[type.key] = type.value;
        console.log('urlQuery: ', state.urlQuery);
      },
      pushPath: (state, path) =&gt; {
        state.urlQuery.path = path;
      }
    },
    getters: {
      getUrlQuery: state =&gt; state.urlQuery
    }
  })
  </code></pre>
  
  <p>And the parent component:</p>
  
  <pre><code>new Vue({
    el: '#app',
    store,
    methods: {
      changeType (type) {
        this.$store.commit('changeType', type);
      }
    }
  })
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>After reflection, The code before are not realy targeted to my problem. <a href="https://jsfiddle.net/ctvgdd0c/2/" rel="nofollow noreferrer">This fiddle</a> are more targeted to my problem.</p>