title: Value from vuex store getter not being updated in component
body: <p>I seem to be having difficulty in updating a value in a component from the vuex store when it is updated.  I have looked at this question (<a href="https://stackoverflow.com/questions/43270159/vue-js-2-how-to-watch-store-values-from-vuex">vue.js 2 how to watch store values from vuex</a>) and followed the accepted answer but it is not working for me.  Here goes with my explanation.</p>
  <p>Data is received by my app and a mutation to the store happens (I have verified that this is working using vuejs devtools).  Here is the relevant code:</p>
  <pre><code>        uibuilder.onChange('msg', function(newVal){
              //console.info('[indexjs:uibuilder.onChange] msg received from Node-RED server:', newVal)
              switch(newVal.topic) {
                  // Process new data from a sensor
                  default:
                      var parts = newVal.topic.split(&quot;/&quot;)
                      for (const [key, value] of Object.entries(newVal.payload)) {
                          if (!(key === &quot;heater&quot; || key === &quot;battery&quot;)){ 
                              var device = { id: parts[2], name: parts[3] + '/' + parts[4], function: key, value: value }
                              this.$store.commit('rooms/UPDATE_VALUE', device)
                          }
                      }
  </code></pre>
  <p>this triggers the mutation in the store/rooms.js module:</p>
  <pre><code>mutations = {
      UPDATE_VALUE(state, payload){ // Updates the value of a device in room
          let device = state.rooms.find(room =&gt; room.id === payload.id).devices
              .find(device =&gt; device.name === payload.name &amp;&amp; device.function === payload.function)
          device.value = parseFloat(payload.value)
      },
  }
  </code></pre>
  <p>and as I say this is all happening.  I have a component that is displaying the device value (on a gauge, but I have removed that for now and just display the value on the page to simplify).</p>
  <pre><code>&lt;template&gt;
      &lt;b-card no-body class=&quot;bg-secondary text-light&quot;&gt;
          &lt;b-card-body class=&quot;bg-secondary m-0 pt-0 pb-0&quot;&gt;
              &lt;button @click=&quot;test&quot;&gt;Test&lt;/button&gt;
              {{ deviceValue }}
          &lt;/b-card-body&gt;
      &lt;/b-card&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  module.exports = {
      props: {
          'gDevice': {type: Object},
          'gRoom': {type: String},
      },
      data: function () {
          return {
  
          }
      },
      computed: {
          deviceValue() {
              return this.$store.getters['rooms/getDeviceValue'](this.gRoom, this.gDevice.name);
          },
      },
  
      methods: {
          test: function(event){
              console.log(this.deviceValue)
          }
      },
  
      created(){
          console.log(this.deviceValue) // Check a value is being returned (it is)
      },
  
      mounted: function () {
  
      },
  
      watch: {
          deviceValue (newval, oldval) {
              console.log(newval)
          },
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>When a new value comes into the app the store is definitely updated but it is not triggering anything to happen in my component.  I added a button to test whether the computed value is changing - it is not!  I guess this explains why the watch event is not being fired.  I just don't understand why the computed value is not updating even though the value in the store has definitely changed.  Hopefully someone can see my error.</p>
  <p>Here is the getter in the store:</p>
  <pre><code>getters = {
      getDeviceValue: (state) =&gt; (roomname, devicename) =&gt; { // returns the value from a device in a room
          return state.rooms.find(room =&gt; room.name === roomname).devices.find(dev =&gt; dev.name === devicename).value;
      },
  }
  </code></pre>
  <p>!!UPDATE!!
  I just discovered that the mutation to the value is not being committed.  If I use the devtools and press the &quot;Commit all&quot; then everything updates as expected.  But if I reload the app then I have to do this again.  I have no clue how to fix this???</p>
  <p>Thanks
  Martyn</p>