title: Reactive getter in vuex?
body: <p>I have getter in vuex which returns item from list</p>
  
  <pre><code>const store = new Vuex.Store({
      state: { arr: {
          1: {name: 'one', attr: true},
          2: {name: 'two', attr: false} 
      },
      mutations: {
          setArrItemName(state, id, name) {
              Vue.set(state.arr, id, name);
          }
      },
      getters: {
          arrItemById(state, getters) =&gt; (id) =&gt; {
              const item = state.arr[id];
              if(item) return item;
              return {
                   name: 'default', attr: true
              };
          }
      }
  })
  </code></pre>
  
  <p>If I output it in template</p>
  
  <pre><code>{{ $store.state.arr[1]['name'] }}
  </code></pre>
  
  <p>it updates fine when another part calls</p>
  
  <pre><code>this.$store.commit('setArrItemName', 1, 'new name');
  </code></pre>
  
  <p>But if template contains</p>
  
  <pre><code>{{ $store.getters.arrItemById(1).name }}
  </code></pre>
  
  <p>Then it's not updated</p>
  
  <p>Problem: this getter is used in different places and I do not want to duplicate this code</p>
  
  <pre><code>&lt;template v-if='$store.state.arr[id]'&gt;
      {{ $store.state.arr[id].name }}
  &lt;/template&gt;
      Default
  &lt;template v-else&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>If 'default' some day changes, or any other attribute of <code>default</code> object then it should be updated in different places.</p>