title: Why do I get an error for mutating "Vuex store state outside of mutation handlers" while inside a mutation handler?
body: <p>I am getting this error when I edit one of the text fields (which updates the store):</p>
  
  <p><img src="https://i.imgur.com/CtQBc7e.png" alt="1"></p>
  
  <hr>
  
  <p>I've already tried putting @change and v-model on the text fields and that is not proper. Need to find a proper way to mutate the state on an event triggered by the text field(s).</p>
  
  <p>Example: 
  <strong>Profile.vue</strong>:</p>
  
  <pre><code>&lt;v-text-field @change="setProfile(profileData)" v-model="profileData.groupName" label="Group Name"&gt;&lt;/v-text-field&gt;
  </code></pre>
  
  <hr>
  
  <p>Here is my code:</p>
  
  <p><strong>Profile.vue</strong>:</p>
  
  <pre><code>&lt;v-text-field @change="set" v-model="profileData.groupName" label="Group Name"&gt;&lt;/v-text-field&gt;
  </code></pre>
  
  <p><strong>Profile.vue Javascript</strong>:</p>
  
  <pre><code>import { mapGetters, mapMutations } from "vuex";
  
  export default {
    name: "Profile",
    created() {
      delete this.profileData;
      this.profileData = JSON.parse(JSON.stringify(this.getProfile()));
      console.log(this.profileData);
    },
    data() {
      return {
        profileData: {
          groupName: null,
          groupClid: null,
          groupContact: null
        }
      };
    },
    methods: {
      set() {
        this.$store.commit("setProfile", this.profileData);
      },
      ...mapGetters(["getProfile"]),
      ...mapMutations(["setProfile"])
    }
  }
  </code></pre>
  
  <p><strong>build.js</strong> --> store.js:</p>
  
  <pre><code>const state = {
      profile: {
          "groupName": "Happy group",
          "groupNumber": "9999999999",
          "groupContact": "Bob Ross"
      }
  };
  
  const getters = {
      getProfile: (state) =&gt; state.profile,
  };
  
  const actions = { };
  
  const mutations = { 
      setProfile: (state, profile) =&gt; (state.profile = profile)
  };
  
  export default {
      state,
      getters,
      actions,
      mutations,
  }
  </code></pre>