I'm learning VueJS and Vuex and I try to make a little management game with a Vuex store.

I have 100 food in the store and every day, my four Peons need to eat 1 unit of food.

So I watch the store for the mealtime in my component Peon.vue, of which four instances exist :

store.watch((state) => {
    if (state.time.hours === this.mealTime) {
      store.commit("mealTime");
    }
  });

And in my store index.js, the commit do this :

mealTime(state) {
  state.ressources.food = {
    ...state.ressources.food,
    quantity: state.ressources.food.quantity - 1,
  }
}

I have noticed that it doesn't work when I have more than 1 commit at the same time (imagine that 2 peons both eat at 7 am ?!). It goes in an infinite loop and the message :

Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function.

I could forget this issue and make them eat at different moment, but I guess I'll have this problem in other situations.

How can I handle multiple commits at the same moment ? Should I use Actions ? If I should use actions, is it possible to "chain" commit one after the other ?

Thanks for your help