title: Getter not reactive when updating the property of an object in Vuex
body: <p>I am experiencing a few issues regarding reactivity in my application.</p>
  <p>I have a Vuex store where I have an object 'songs' containing 'song' objects where the key is their id. For each song object within, I have various properties, with the one in question being 'playing' a boolean value.</p>
  <p>e.g.</p>
  <pre class="lang-js prettyprint-override"><code>songs = {
     2: {playing: false},
     7: {playing: true)
  }
  </code></pre>
  <p>Within my application I have a list, using v-for for all these songs with a button that toggles the playing property of the song. When the button is pressed I dispatch the action I have created passing in the songid associated with the button that has been pressed</p>
  <pre class="lang-js prettyprint-override"><code>this.$store.dispatch('toggleSongPlaying', {songid: songid})
  </code></pre>
  <p>Depending on whether the song is playing or not, I wish to display the appropriate icon.</p>
  <p>My simplified vuex store for my issue consists of the following:</p>
  <pre class="lang-js prettyprint-override"><code>const state = {
    songs: {}
  };
  
  const mutations = {
    update_song_playing(state, payload) {
       var songObj = state.songs[payload.songid]
       var playingBool = !songObj.playing
       Vue.set(songObj, 'playing', playingBool)
    }
  };
  
  const actions = {
    toggleSongPlaying({ commit }, payload) {
       commit(&quot;update_song_playing&quot;, payload)
    }
  };
  
  const getters = {
    getSongs: state =&gt; state.songs
  };
  </code></pre>
  <p>The setting functionality is working fine, the issue is with reactivity. When the toggle button is pressed, the icon change does not occur. Triggering a rerender does however result in the icon changing. Within my component, I am using mapGetters like so:</p>
  <pre class="lang-js prettyprint-override"><code>computed: {
      ...mapGetters({
        songs: &quot;getSongs&quot;
      })
  }
  </code></pre>
  <p>Is there something I am missing in order to get reactivity to work correctly with this nested object?</p>
  <p>Thanks for any suggestions!</p>
  <p>EDIT - Template code for list and icons</p>
  <pre class="lang-js prettyprint-override"><code>&lt;v-list dense&gt;
     &lt;v-subheader&gt;Songs List&lt;/v-subheader&gt;
     &lt;v-list-item-group v-model=&quot;activeSong&quot; color=&quot;primary&quot;&gt;
           &lt;v-list-item
                v-for=&quot;(song, songID) in songs&quot;
                :key=&quot;songID&quot;
           &gt;
                 &lt;v-icon class=&quot;mr-3&quot; @click.stop=&quot;toggleSongPlaying(songID)&quot;&gt;{{song.playing ? 'mdi-pause' : 'mdi-play'}}&lt;/v-icon&gt;
  
                  // song details etc...
                  &lt;v-list-item-content&gt;
                      &lt;v-list-item-title&gt;
                      &lt;/v-list-item-title&gt;
                  &lt;/v-list-item-content&gt;
                      
            &lt;/v-list-item&gt;
     &lt;/v-list-item-group&gt;
  &lt;/v-list&gt;
  </code></pre>
  <pre><code>methods: {
     toggleSongPlaying(songid) {
         this.$store.dispatch('toggleSongPlaying', {songid: songid})
     }
  },
  </code></pre>
  <p>EDIT2
  In a separate component in created, I populate the songs object with a song like so</p>
  <pre><code>created() {
      var songid = &quot;12&quot;
      var song = {
          length: ...,
          playing: false,
      }
  
      var payload = {
          song: song,
          songid: songid
      }
  
      this.$store.dispatch('addSong', payload)
  },
  </code></pre>
  <p>Within Vuex</p>
  <p>Action:</p>
  <pre><code>addSong({ commit }, payload) {
     commit(&quot;add_song&quot;, payload);
  }
  </code></pre>
  <p>Mutator:</p>
  <pre><code>add_song(state, payload) {
      state.songs[payload.songid] = payload.song
  },
  </code></pre>