To retrieve a list of objects in a Vue 3 component I use a getters in Vuex 4 like this:

    getAccountingEntries: (state) => {
    let balance = 0;
    return state.entries.filter((entry) => {
      balance = balance + (entry.revenue - entry.expenditure);
      entry.balance = balance;
      return (
        entry.type === 'gj' &&
        entry.year === state.yearDisplayed &&
        entry.userID === state.currentUserID
      );
    });
  }

To retrieve a list of objects in a Vue 3 component I use a getters in vuex 4 like this:

You will notice that I perform a calculation and add the result in a new property named balance.

It works perfectly.

But I noticed that adding the balance property on the object also reflected in the objects in state.entries.

I don't like my getAccountingEntries function to change state without going through a mutation although it seems to work fine.

Am I doing it wrong? Is there a way to avoid this side effect?

Thank you for your help.