title: Update existing object in array vuex
body: <p>I'm using the latest version of Nuxt JS 2.8.1 to build a hybrid app. I'm utilising the modules mode of Vuex as it's recommended to do this in order for me to save data and access it across different pages, components and layouts.</p>
  
  <p>On one particular page, a settings page that I've built I have a Vuetify switch, essentially a toggle which will push a value of either <code>true</code> or <code>false</code>, I'm using this to implement a dark mode feature and conditionally render styling on the page.</p>
  
  <p>My toggle switch will parse a list of settings which get updated via the <code>v-model</code> on the input and then committed to my store:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;v-list-tile avatar&gt;
          &lt;v-list-tile-action&gt;
            &lt;v-switch color="primary" v-model="settings.darkMode" @change="saveSetting('darkMode')"&gt;&lt;/v-switch&gt;
          &lt;/v-list-tile-action&gt;
          &lt;v-list-tile-content&gt;
            &lt;v-list-tile-title&gt;Dark mode&lt;/v-list-tile-title&gt;
            &lt;v-list-tile-sub-title&gt;Toggle app's dark mode.&lt;/v-list-tile-sub-title&gt;
          &lt;/v-list-tile-content&gt;
        &lt;/v-list-tile&gt;
  </code></pre>
  
  <p><strong>My JS</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>data () {
      return {
        settings: {
          darkMode: false,
          dataSaver: false,
        },
        retrieveSettings: null,
        isClearing: {
          local: false,
          sessions: false,
          all: false
        }
      }
    },
  methods: {
  
    /**
       * Save settings to storage
       */
      saveSetting() {
        localStorage.setItem('my_settings',JSON.stringify(this.settings));
        var beacon_settings = JSON.parse(localStorage.getItem('my_settings'));
        this.retrieveSettings = beacon_settings
        this.$store.commit('settings/add', {
          darkMode: this.settings.darkMode,
          dataSaver: this.settings.dataSaver
        })
      }
  
  }
  </code></pre>
  
  <p><strong>My store/settings.js file (Vuex)</strong> </p>
  
  <pre class="lang-js prettyprint-override"><code>export const state = () =&gt; ({
    settings: []
  })
  
  export const mutations = {
    add (state, settingsObject) {
      state.settings.push(settingsObject)
    }
  }
  </code></pre>
  
  <p>This will successfully push the data that I can retrieve via a computed property in other pages of my website, however, every time I toggle the switch, it will push a new object into the <code>settings</code> array rather than update the existing one, e.g:</p>
  
  <pre><code>[
    {
      darkMode: true,
      dataSaver: false
    },
    {
      darkMode: false,
      dataSaver: false
    }
  ]
  </code></pre>
  
  <p>Preferably I'd like to just update the existing object that was pushed, rather than push another one, I'm struggling with this bit and can't seem to figure this out. I might need to do something with <code>$set</code> but not too sure.</p>