title: Vue2 + Vuex Commit Not Committing (without Vue devtools)
body: <p>I'm trying to accomplish what should be a basic task with Vuex, but for some reason it's not working, and after searching far and wide, I greatly appreciate any help. </p>
  
  <p><strong>What I'm trying to do</strong>: </p>
  
  <p>Update a list (object) of objects in my store with a new property (object).</p>
  
  <p><strong>What's going wrong</strong>: </p>
  
  <p>Before I even dispatch the action to commit the new object from my component (I'm accessing the action via mapActions), certain properties in any existing objects in the list are updated with the values tied to the inputs/v-models in my component. As my code shows below, I know reactivity with objects is an issue, so I'm using <code>Vue.set(...)</code> per the docs (<a href="https://vuex.vuejs.org/en/mutations.html" rel="noreferrer">Mutations Follow Vue's Reactivity Rules</a>)</p>
  
  <p><strong>Why I don't think I'm doing something completely stupid...(but am probably wrong)</strong></p>
  
  <p>When I check on the mutation in DevTools, the mutation is logged as expected, and when I press "Commit"/"Commit All", the existing objects in my list no longer respond to changes in the inputs. This is obviously the behavior I expect to occur given that the action is literally supposed to commit the change to the state. Yet why does it not work within the code, and only within the devtools?</p>
  
  <p>I apologize again for what is probably a basic issue, but I've seen a few others with a similar issue and no written explanation as to what we're missing...</p>
  
  <p><strong>Initial State</strong></p>
  
  <pre><code>const state = {
    quotes: {}
  }
  </code></pre>
  
  <p><strong>Mutation</strong></p>
  
  <pre><code>mutations: {
    [types.ADD_QUOTE] (state, payload) {
      Vue.set(state.quotes, payload.id, payload)
    }
  }
  </code></pre>
  
  <p><strong>Action</strong></p>
  
  <pre><code>actions: {
    addQuote ({ commit }, payload) {
      commit(types.ADD_QUOTE, payload) 
    }    
  }
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="quote-block"&gt;
      &lt;label&gt;price&lt;/label&gt;
      &lt;input type="text" v-model="quote.price"&gt;
      &lt;label&gt;id&lt;/label&gt;
      &lt;input type="text" v-model="quote.id"&gt;
      &lt;!-- Just displaying props below --&gt;
      &lt;div&gt;{{ quote.item }}&lt;/div&gt;
      &lt;div&gt;{{ quote.vendor }}&lt;/div&gt;
      &lt;div&gt;Qty: {{ quote.qty }}&lt;/div&gt;
      &lt;button @click="addQuote(quote)"&gt;Submit quote&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapActions } from 'vuex'
  
  export default {
    props: {
      vendor: String,
      item: String,
      qty: Number
    },
    data () {
      return {
        quote: {
         id: '',
         price: '',
         timestamp: Date.now(),
         vendor: this.vendor,
         item: this.item,
         qty: this.qty
        }
       }
      },
    methods: {
      ...mapActions([
        'addQuote'
      ])
     }
    }
  </code></pre>
  
  <p><strong>To summarize,</strong> within the devtools, I see values for <code>id</code> and <code>price</code> changing within objects that I set to <code>state.quotes</code> - they're apparently tied to the v-models for <code>quote.price</code> and <code>quote.id</code> within my component. It's only when I "Commit All" within devtools that the properties for those objects stop changing. Why isn't the <code>commit</code> method within the action making these commits?</p>