DISCLAIMER ON DUPLICATE QUESTION
There are lots of SO questions with this same premise, however, many are old and the question/answer is based on vue2. Given how different vue2 and vue3 are, a new question seems appropriate.

QUESTION

I have two computed properties like so:

 const transactions_map = computed(()=>{
    if (!tenants.value){
      return {}
    }
    const _val = {};
    for (const [key, value] of tenants.value.entries()){
      const _transactions = value.transactions;
      const nm = DataMap.fromArray(_transactions, {sortKey: 'date'})
      _val[key] = nm;
    }
    return _val
  })

  const transactions_with_balance = computed(() => {
    const return_value = {}
    Object.entries(transactions_map.value)
      .forEach(([key, value])=>{
        let prevTotal = 0;
        const nm = new DataMap()
        for (const [tran_key, tran_val] of value.entries()){
          const _tran = {...tran_val};
          _tran.balance = _tran.amount + prevTotal
          prevTotal = _tran.balance
          nm.set(tran_key, _tran)
      }
      return_value[key] = nm
    })
    return return_value
  })

If I add a value to the array returned by transactions_map, it is not reflected in transactions_with_balance.

transactions_map['some_tenant_id'].set('some_transaction_id', new_transaction_object)

According to the vue3 docs it should be deeply reactive

The DataMap object in this example is just a Map class that contains some helpers. Could it be Vue3 cant detect changes to an underlying map?

Reproduction here