Update data using vuex given items

Instead of storing stats as a state object, you could use a getter which will be reactive to your reservation state.

getters: {
stats(state){
  return {
    pending: countState(1),
    confirmed: countState(2),
    cancelled: countState(3),
  };

  function countState(stateId){
    return state.reservations.reduce((acc, cur) => (cur.state_id === stateId ? ++acc : acc), 0);
  }
}

EDIT: If you’d like it to reflect your current paginated reservations you could move the stats code from vuex into the component itself using a computed function, like so:

computed: {
    stats: function () {
        // This should point to your current set of paginated reservations
        const reservations = this.$store.getters.reservations;

        return {
            pending: countState(1),
            confirmed: countState(2),
            cancelled: countState(3),
        };

        function countState(stateId) {
            return reservations.reduce((acc, cur) => (cur.state_id === stateId ? ++acc : acc), 0);
        }
    },
},