V-bind, v-for, components, props, getters: не изменять состояние хранилища vuex

Question

Много тем говорят об этом, но я не смог найти решение моей проблемы OO, код кажется довольно простым

вид:

<task v-for="(item, index) in tasks" v-bind:item="item" v-bind:index="index" v-bind:key="item.id"> </task>

<script>
import { mapGetters } from 'vuex';
import task from 'task.component.vue';
export default {
  components: {
    task,
  },
  computed: {
    ...mapGetters(['tasks']),
  },
  created() {
    this.$store.dispatch('getTasks');
  },
};
</script>

магазин:

const getters = {
  tasks: state => state.tasks,
};

const actions = {
  getTasks: async ({ commit }) => {
    try {
      const res = await axios(....);
      commit('tasks_success', res.data.data);
    } catch (err) {
      ...
    }
  },
};

const mutations = {
  tasks_success(state, data) {
    state.tasks = data;
  },
};

const state = {
  tasks: [],
};

export default {
  state,
  getters,
  actions,
  mutations,
};

компонент: <template><div>{{item.description}} </div> </template>

<script>
/**
 * Export default
 */
export default {
  name: 'task',
  props: ['item'],
};
</script>

Я пробовал несколько раз, что кажется мне самым простым, но у меня все еще есть эта ошибка:

vue.runtime.esm.js? 2b0e: 619 [Предупреждение Vue]: Ошибка обратного вызова для наблюдателя "function () { return this._data.$$state }": "Ошибка: [vuex] не изменять состояние хранилища vuex вне обработчики мутаций ".

vue.runtime.esm.js?2b0e:1888 Ошибка: [vuex] не изменяют состояние хранилища vuex вне обработчиков мутаций.

все работает одинаково, но я хотел бы понять, есть ли у кого-нибудь идея:/, уверен, что речь идет об асинхронном ожидании и создано?