V-bind, v-for, компоненты, реквизиты, геттеры: не изменять состояние хранилища vuex

Question

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

представление:

<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 warn]: Ошибка в обратном вызове для наблюдателя "function () {return this._data. $$ state}": "Ошибка: [vuex] не изменяйте состояние хранилища vuex вне обработчиков мутаций. "

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

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