title: Vue component computed not reacting
body: <p>I have 2 components OperatorsList and OperatorButton.
  The OperatorsList contains of course my buttons and I simply want, when I click one button, to update some data :</p>
  
  <ul>
  <li>I emit <em>select</em> with the operator.id</li>
  <li><p>This event is captured by OperatorList component, who calls <em>setSelectedOperator</em> in the store</p>
  
  <ol>
  <li><p>First problem here, in Vue tools, I can see the store updated in real time on Vuex tab, but on the Components tab, the operator computed object is not updated until I click antoher node in the tree : I don't know if it's a display issue in Vue tools or a real data update issue.</p></li>
  <li><p>However, when it's done, I have another computed property on Vue root element called <em>selectedOperator</em> that should return... the selected operator : its value stays always null, I can't figure out why.</p></li>
  <li><p>Finally, on the button, I have a v-bind:class that should update when the operator.selected property is true : it never does, even though I can see the property set to true. </p></li>
  </ol></li>
  </ul>
  
  <p>I just start using Vue, I'm pretty sure I do something wrong, but what ? 
  I got the same problems before I used Vuex, using props.</p>
  
  <p>Here is my OperatorList code :</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div class="conthdr"&gt;Operator&lt;/div&gt;
          &lt;div&gt;
              &lt;operator-button v-for="operator in operators" :op="operator.id" 
              :key="operator.id" @select="selectOp"&gt;&lt;/operator-button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
      import OperatorButton from './OperatorButton';
      export default {
          name: 'operators-list',
          components : {
              'operator-button': OperatorButton
          },
          computed : {
              operators() { return this.$store.getters.operators },
              selected() {
                  this.operators.forEach(op =&gt;{
                      if (op.selected) return op;
                  });
                  return null;
              },
          },
          methods : {
              selectOp(arg) {
                  this.$store.commit('setSelectedOperator', arg);
              }            
          },
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>OperatorButton code is</p>
  
  <pre><code>&lt;template&gt;
      &lt;span&gt;
          &lt;button type="button" v-bind:class="{ sel: operator.selected }" 
           @click="$emit('select', {'id':operator.id})"&gt;
              {{ operateur.name }}
          &lt;/button&gt;
      &lt;/span&gt;
  &lt;/template&gt;
  &lt;script&gt;
      export default {
          name: 'operator-button',
          props : ['op'],
          computed : {
              operator() {
                  return this.$store.getters.operateurById(this.op);
              }
          },
      }
  &lt;/script&gt;
  &lt;style scoped&gt;
      .sel{
          background-color : yellow;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>and finally my app.js look like that :</p>
  
  <pre><code>window.Vue = require('vue');
  import Vuex from 'vuex';
  import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
  
  const store = new Vuex.Store({
      state: {    
          periods : [],
      },
      mutations: {
          setInitialData (state, payload) {
              state.periods = payload;
          },
          setSelectedOperator(state, payload) {
              this.getters.operateurs.forEach( op =&gt; {
                  op.selected = (op.id==payload.id)
              })
          },
      },
      getters : { 
         operators : (state) =&gt; { 
              if (Array.isArray(state.periods)) 
              {
                  let ops = state.periods
                  .map( item =&gt; {
                      return item.operators
                  }).flat();
                  ops.forEach(op =&gt; {
                      // op.selected=false; //replaced after Radu Diță answer by next line : 
                      if (ops.selected === undefined) op.selected=false;
                  })
                  return ops;
              }
          },
          operatorById : (state, getters) =&gt; (id) =&gt; {
              return getters.operators.find(operator =&gt; operator.id==id);
          },
      }
  });
  
  import Chrono from './components/Chrono.vue';
  var app = new Vue({
              el: '#app',
              store,
              components : { Chrono },
              mounted () {
                 this.$store.commit('setInitialData',
                      JSON.parse(this.$el.attributes.initialdata.value));
              },
              computed: {
                              ...mapState(['periods']),
                              ...mapGetters(['operators', 'operatorById']),
                              selectedOperator(){
                                  this.$store.getters.operators.forEach(op =&gt;{
                                      if (op.selected) return op;
                                  });
                                  return null;
                              }
  
              },
          });
  </code></pre>