title: How can I solve v-model with vuex?
body: <p>My codepen like this : <a href="https://codepen.io/skineur/pen/JjjGoEo" rel="nofollow noreferrer">https://codepen.io/skineur/pen/JjjGoEo</a></p>
  
  <p>In the codepen, there is no error. Because v-model datepicker <code>&lt;v-date-picker v-model="foo.date"&gt;</code>, it is taken from <code>data</code>. So if I select date in the datepicker, there is no error</p>
  
  <p>My problem is v-model datepicker is not taken from <code>data</code>. But it is taken from  <code>state</code> vuex store</p>
  
  <p>My computed to get data like this :</p>
  
  <pre><code>export default {
      ...
      computed: {
          ...mapGetters(["foos"])
      }
  }
  </code></pre>
  
  <p>My vuex store like this :</p>
  
  <pre><code>import api from "../../services/api";
  
  const state = {
    foos: []
  };
  // getters
  const getters = {
    foos: state =&gt; state.foos,
  }
  
  // actions
  const actions = {
    async getFoos({ commit }, payload) {
      commit("setLoading", true);
      let result = await api.getFoos(payload);
      const items = result.data;
  
      for (let i = 0; i &lt; items.length; i++) {
          let payload = {
            id: items[i].id,
          }; 
          let resultSchedule = await api.getFooSchedule(payload);
  
          items[i].schedule = resultSchedule.data
          items[i].date = new Date().toISOString().substr(0, 10)
      }
  
      commit("setDataFoo", { items: items });
    }
  };
  
  // mutations
  const mutations = {
    setDataFoo(state, { items }) {
      state.foos = items;
    }
  };
  
  export default {
    state,
    getters,
    actions,
    mutations
  };
  </code></pre>
  
  <p>If foos is taken from state and it executed, there exist error :</p>
  
  <pre><code>do not mutate vuex store state outside mutation handlers
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/EKKFK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EKKFK.png" alt="enter image description here"></a></p>
  
  <p>How can I solve this problem?</p>
  
  <p>Note :</p>
  
  <ol>
  <li><p>in the codepen, there is no error. because foos is taken from <code>data</code></p></li>
  <li><p>there is exist error if foos is taken from <code>state</code> vuex store. The error appears when selecting a date</p></li>
  </ol>