title: Vuex computed property not updating
body: <p>I am having a hard time trying to update my component state based off a reference Id that I am using to display a result that lives in my store/vuex. Basically, what I want to happen is for when I update a reference ID, my getters/computed passes down the updates value. I have provided a simple version of what I am trying to do with no luck. Any ideas? </p>
  
  <p>What am I doing wrong?</p>
  
  <p><strong>Parent Component file</strong></p>
  
  <pre><code>&lt;template&gt;
   &lt;div class="parent"
     &lt;Car :car="car" /&gt;
     &lt;div class="car-btn" @click="switchCarId('11')" &gt;Change Car&lt;/div&gt;
   &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapGetters } from 'vuex';
  import Car from './Car.vue';
  export default {
    name: 'Car',
    components: { Car },
    computed: {
      ...mapGetters(['car'])
    },
    methods: {
      switchCarId(val) {
        this.$store.commit('updateCarReferenceId', val);
      }
    }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Child Component file</strong></p>
  
  <pre><code>&lt;template&gt;
   &lt;div class="car"&gt;{{ car.name }} &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'Car',
    props: { 'car': Object }
  };
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Store file</strong></p>
  
  <pre><code>import Vuex from 'vuex';
  Vue.use(Vuex);
  
  export default new Vuex.Store({
    state: {
      selectedCarId: '10',
      cars: {
        '10': {
          name: 'Red Car'
        },
        '11': {
          name: 'Blue Car'
        }
      }
    },
    mutations: {
      updateCarReferenceId(state, val) {
        state.selectedCarId = val;
      }
    },
    getters: {
      car: (state, getters) =&gt; {
        return getters.cars[getters.getSelectedCarId];
      },
      cars: (state) =&gt; {
        return state.cars;
      },
      getSelectedCarId: (state) =&gt; {
        return state.selectedCarId;
      }
    }
  });
  </code></pre>