Why is my Vue3 ref not keeping the value that I’m setting?

I am calling an API to fetch details about several hockey games. I am storing the results in a ref called games.

const games = ref<Game[]>([])

const todaysGameSummaries = await NHL.getTodaysGameSummaries()
const gamePromises = todaysGameSummaries.map(async (gameSummary) => await getCompleteGameData(gameSummary.id))
games.value = await Promise.all(gamePromises)

const firstGameFirstPlayer = games.value[0].playerSummaries[0]
console.log("Immediate:", firstGameFirstPlayer)
setTimeout(() => console.log("After:     ", firstGameFirstPlayer), 1)

//Output
//Immediate: Proxy(Object) {id: 8471218, teamId: 3, firstName: 'Blake', lastName: 'Wheeler', number: 17, …}
//After:     Proxy(Object) {id: 8480012, teamId: 3, firstName: 'Blake', lastName: 'Wheeler', number: 17, …}

Notice that the id changes immediately, but the rest of the object remains correct. Naturally, my first thought was “Somehow the value is being overwritten”, so I set up a watcher to see if it was being accessed subsequently:

watch(
  games,
  (newValue, oldValue) => {
    console.log("Old:", oldValue[0]?.playerSummaries[0])
    console.log("New:", newValue[0]?.playerSummaries[0])
  },
  { deep: true }
)

//Output
//Old: undefined
//New: Proxy(Object) {id: 8480012, teamId: 3, firstName: 'Blake', lastName: 'Wheeler', number: 17, …}

But as you can see, the watcher is triggered just once.

I recognize that providing insight is difficult without being able to see the issue reproduced, but I have not been able to do so without Vue3.

Some notes:

  • The incorrect id belongs to a different player in the same array.
  • It is consistently the same wrong id.

Why is the id changing?

Raw API Response:

API Response

Vue ref:

Vue data