I love vue.js and I definitely love computed properties and VueX getters. But I've reached a point where I'm not sure if the way I'm using them will have some performance disadvantages.

This is a common pattern in my code (also true for local component data and computed properties):

Start with this simple state (source of truth):

export default () => ({
   bonds: {
    eth: [],
    celo: []
  }
})

In my getter I usually do it the following way:

export default {
  getBondsEth(state) {
    return state.bonds.eth
  },
  getBondsCelo(state) {
    return state.bonds.celo
  },
  getTotalBondsEth(_, getters) {
    return getters.getBondsEth.length
  },
  getTotalBondsCelo(_, getters) {
    return getters.getBondsCelo.length
  },
  getTotalBonds(_, getters) {
    return getters.getTotalBondsEth + getters.getTotalBondsCelo
  },
  getWhateverComputationEth(_, getters) {
    return getters.getBondsEth.reduce... or map or filter or find etc....
  }
  ...
}

So, my question will be

1. Is this considered a bad practice since I'm using a getter that depends on other getters? Are these considered circular dependencies?

2. Should I always derive my getters directly from the source of truth? For example, change the above to...

getTotalBonds(state) {
    return state.bonds.eth.length + state.bonds.celo.length
}

3. Is there a way to debug my getters or computed properties using the browser console to make sure I don't have performance issues or weird iteration loops etc?

Thank you very much if you take the time to answer!