title: Vuex - modifying local copy of state causes mutation error
body: <p>I've come across an issue in my Vue app that I can't explain. I am getting the following error when attempting to update a local copy of a piece of state.</p>
  
  <blockquote>
    <p>Error: [vuex] Do not mutate vuex store state outside mutation handlers.</p>
  </blockquote>
  
  <p>Here's a sample of what I'm doing in my code</p>
  
  <pre><code>import { mapGetters } from 'vuex'
  export default {
      name: 'sampleComponent',
      data() {
          return {
              userModel: null
          }
      },
      mounted() {
          this.userModel = this.user
      },
      computed: {
          ...mapGetters(['getApplicationUsers']),
          user() {
              return JSON.parse(JSON.stringify(this.getApplicationUsers[0]))
          }
      },
      methods: {
          addUserRole() {
              if (!this.userModel.userRoles.includes("newRole")) {
                  this.userModel.userRoles.push("newRole")
              }
          }
          removeUserRole() {
              let index = this.userModel.userRoles.indexOf("newRole");
              if (index &gt; -1) {
                  this.userModel.userRoles.splice(index, 1)
              }
          }
  }
  </code></pre>
  
  <p>Whenever removeUserRole is called, I get the mutation error. I can add roles just fine with addUserRole, but it yells at me when I try to remove a role.</p>
  
  <p>Can anyone explain this behavior to me? When I deep copy the piece of state, shouldn't<code>userModel</code> now be decoupled from the state, unwatched by vuex, and mutable?</p>