title: Changes to object after it is pushed to Vuex store reflect in the store
body: <p>To create a new record, I define the record object within the components <code>data()</code> function, and bind it to form fields using <code>v-model</code>. This object is then passed to a Vuex action that POSTs the new record to the back end, and then sends the object to the corresponding mutator.</p>
  <p>The issue is, when changes are made to the original object defined in data(), those appear to cascade to the object that was pushed into the store.</p>
  <p>I understand the pass by reference concept, but it seems this pattern should not be affected. Is there a better pattern to use when creating a new DB record?</p>
  <p><strong>Add Record Vue</strong></p>
  <pre><code>&lt;v-text-field
      v-model=&quot;newRecord.name&quot;
  /&gt;
  ...
  export default {
      data() {
          return {
              newRecord: {}
          }
      }
  }
  ...
  methods: {
      addRecord(){
          this.addRecordAction(this.newRecord)
          ...
          this.newRecord.name = 'new name' // &lt;== reflects in vuex store!
      }
  }
  </code></pre>
  <p><strong>Vuex Record Store</strong></p>
  <pre><code>async addRecordAction({commit}, newRecord){
      const response = await axios.post('/api/record', newRecord)
      newRecord = response.data // contains record's new ID
      commit('addRecordMutation', newRecord)
  }
  ...
  addRecordMutation: (state, newRecord) =&gt; (state.records.push(newRecord))
  </code></pre>