[Vuejs]-Why do I get an error for mutating "Vuex store state outside of mutation handlers" while inside a mutation handler?

Answer:

• Remove delete this.profileData from created()

• Change the set() to `setData’

• Change to Object.assign (shouldn’t matter if you use string->parse or Object.assign)

• Put one change event on the card, above the text fields. This way, we don’t have to duplicate the vue-style event listener.

<template >
  <v-container fluid>
    <v-layout row wrap fill-height>
      <v-flex xs6>
        <v-card elevation="10">
          <v-card-title primary-title class="pb-0">
            <div>
              <h3 class="headline mb-0 pb-0">Group Information</h3>
            </div>
          </v-card-title>
          <v-card-text @change="setData">
            <v-container fluid>
              <v-layout align-center row wrap>
                <v-flex xs3>
                  <v-responsive>Group Name:</v-responsive>
                </v-flex>
                <v-flex xs9>
                  <v-text-field v-model="profileData.groupName" label="Group Name"></v-text-field>
                </v-flex>
              </v-layout>
            </v-container>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
    <v-spacer></v-spacer>
  </v-container>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";

export default {
  name: "Profile",
  created() {
    this.profileData = Object.assign({}, this.getProfile());
  },
  data() {
    return {
      profileData: {}
    };
  },
  methods: {
    setData() {
      this.setProfile(this.getData());
    },
    getData() {
      return Object.assign({}, this.profileData);
    },
    ...mapGetters(["getProfile"]),
    ...mapMutations(["setProfile"])
  }
};
</script>