Watch() nested object propert

I am attempting to watch() the state of a state machine which should be updated after an async call. I want to then access the resolved value stored in the state.

Watch is triggered, my console.log() of the entire object shows me that the call has been fulfilled. However when I access the property directly it is empty.


setup() {

      const state = ref(tokenSelectMachine.initial)
      const markets = ref({})
      const tokens = ref([])
      const TraderStateVal = ref('')

      const { state: TraderState, send: TraderSend } = useActor(
        insertTraderMachine()
      );

      watch(()=> TraderState.value.value, onChangeTraderState,
        // watch options
        // { immediate: true }
      )

      function onChangeTraderState (T_state, T_oldstate) {
          TraderStateVal.value = T_state
          if (T_state === "activeMarketReady"){

// state contains resolved market
            console.log("onChangeTraderState: TraderState.value:",TraderState.value)

// market is empty - how is this possible ???
            console.log("onChangeTraderState: markets:",TraderState.value.context.markets)
            markets.value = TraderState.value.context.markets.markets
            buildMarketList(markets.value)
            console.log("tokens:",tokens.value)
            state.value = 'show'
            // TokenSelectService.send("LOADED")
          }
        }

      function buildMarketList(markets) {

//...
        })
      }
}

Hi,
To better understand your problem, could you provide what is logged on the console when you run this line?

Thank you for taking the time to answer! I’ve worked out a solution and so will close this question.