title: Pass vuex state to component via props and change state value using v-model or event
body: <p>I have a module how renders a component and pass the state of vuex via <strong>props</strong> to the component, so far so good, but I'm binding the props in a checkbox list and I'm trying to change its value, however Vuex returns me an error telling me not to mutate the store data without a mutation, with code I think is more easy to understand.</p>
  
  <p><strong>Module</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;modal :visible="modalIsVisible"
        :data="rules"
        v-on:openModal="openModal"
        v-on:submitRules="submitRules"&gt;
      &lt;/modal&gt;
    &lt;div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { mapState, mapActions } from 'vuex';
  
  import Modal from './modal/modal.vue';
  
  export default {
    name: 'Module',
    components: {
      Modal,
    },
    data() {
      return {
        modalIsVisible: false
      };
    },
    computed: 
      ...mapState({
        rules(state, getters) {
          return getters['module/rules'];
        },
      }),
    },
    methods: {
      loadRules() {
        this.$store.dispatch('module/getRules');
      },
      async openModal() {
        if (!this.modalIsVisible) {
          await this.loadRules(typeRules);
        }
        this.modalIsVisible = !this.modalIsVisible;
      },
    }
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>ModalRules</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
        &lt;modal :visible.sync="visible"&gt;
            &lt;div slot="content"&gt;
              &lt;div v-for="group in data" :key="group.name"
                 class="neo-form-group"&gt;
                &lt;h1 class="policy__title-group--text" v-text="group.name"&gt;&lt;/h1&gt;
                &lt;div class="neo-form-toggle-list neo-form-toggle-list--inline"&gt;
                  &lt;div v-for="rule in group.rule" :key="group.title"
                       class="neo-form-toggle-list__item neo-form-toggle neo-form-toggle--checkbox"&gt;
                    &lt;input class="neo-form-toggle__field" :id="rule.title" v-model="rule.checked" name="rule"
                       type="checkbox"/&gt;
                    &lt;label class="neo-form-toggle__label" :for="rule.title"&gt;
                      {{ rule.title }}
                    &lt;/label&gt;
                    &lt;h6 class="neo-text-disabled-options"&gt;{{ rule.description }}&lt;/h6&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        &lt;/modal&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import modal from '@/components/shared/modal/Modal.vue';
  
  export default {
    name: 'ModalRules',
    props: {
      visible: Boolean,
      data: Array,
    },
    components: {
      Modal,
    },
    methods: {
      updateValue(e) {
          //I don't know how to update the property checked of rule    
      },
      setRules() {
        this.$emit('submitRules', { checked: this.data });
      },
      closeModal() {
        this.$emit('openModal');
      },
    }
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Action</strong></p>
  
  <pre><code>import { rulesService } from '../../../../services/api/graphql/modules/rules';
  
  export default {
    getRules: async ({ commit }) =&gt; {
      const payload = await rulesService.getRules().then(res =&gt; res.data.rules);
      commit('setRules', payload);
    },
  };
  </code></pre>
  
  <p><strong>Mutation</strong></p>
  
  <pre><code>export default {
    setRules: (state, payload) =&gt; {
      state.rules = payload;
    },
  };
  </code></pre>
  
  <p><strong>Getters</strong></p>
  
  <pre><code>export default {
    rules: state =&gt; state.rules,
  };
  </code></pre>
  
  <p><strong>State</strong></p>
  
  <pre><code>export default {
    rules: [],
  };
  </code></pre>
  
  <p><strong>JSON Mock</strong></p>
  
  <pre><code>[
    {
      "type": "rules",
      "group": [
        {
          "name": "RuleGroup1",
          "rule": [
            {
              "id": 1,
              "title": "Rule 1",
              "description": "Rule description 1",
              "homonym": false,
              "criticality": "high",
              "checked": false
            },
            {
              "id": 2,
              "title": "Rule 2",
              "description": "Rule description 2",
              "homonym": false,
              "criticality": "high",
              "checked": false
            }
          ]
        },
        {
          "name": "RuleGroup2",
          "rule": [
            {
              "id": 6,
              "title": "Rule 3",
              "description": "Rule description 3",
              "homonym": false,
              "criticality": "high",
              "checked": false
            },
            {
              "id": 7,
              "title": "Rule 4",
              "description": "Rule description 4",
              "homonym": false,
              "criticality": "medium",
              "checked": false
            }
          ]
        },
        {
          "name": "RuleGroup3",
          "rule": [
            {
              "id": 8,
              "title": "Rule 5",
              "description": "Rule description 5",
              "homonym": false,
              "criticality": "high",
              "checked": false
            }
          ]
        },
        {
          "name": "RuleGroup4",
          "rule": [
            {
              "id": 9,
              "title": "Rule 6",
              "description": "Rule description 6.",
              "homonym": false,
              "criticality": "medium",
              "checked": false
            }
          ]
        }
      ]
    }
  ]
  </code></pre>
  
  <p><strong>Interface</strong></p>
  
  <p><a href="https://i.stack.imgur.com/XSwqz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XSwqz.png" alt="Interface"></a></p>
  
  <p>I don't know how to mutate my checkbox state with vuex good practices, this way I'm doing vuex returns me a error.</p>
  
  <p><strong>Error</strong></p>
  
  <pre><code>Error: [vuex] do not mutate vuex store state outside mutation handlers.
  </code></pre>
  
  <p>And also I intend to keep my component without access to the store, keeping it as a dummy component, with all the responsibility of state change with the Module,</p>
  
  <p>Any help? Thanks!</p>