I have been working with the latest version of Nuxt.js, Nuxt3. I am using the fetch API to get JSON data and use that to make another request. Here is my <script setup> code:

<script setup>
// [...]
const borderNames = ref([])

const { data } = await useAsyncData(countryName, async () => {
  // 1st network call
  const response = (await $fetch(`https://restcountries.com/v3.1/name/${countryName}`))[0]

  response.borders.forEach(async border => {
    // 2nd network call
    const borderRes = (await $fetch(`https://restcountries.com/v3/alpha/${border}`))[0]

    // updating the value of Ref<BorderName[]>
    borderNames.value = [...borderNames.value, borderRes.name.common]
    console.log(borderNames.value)
  })
  return response
})
</script>

<template>
  <!-- [...] -->
  <span>Borders: {{ borderNames }}</span>
</template>

The console gives the following output, proving that the network call is working as expected and the Ref value is updated accordingly:

> [ 'Germany' ]
> [ 'Germany', 'Netherlands' ]
> [ 'Germany', 'Netherlands', 'Luxembourg' ]
> [ 'Germany', 'Netherlands', 'Luxembourg', 'France' ]

But on the website, I get an empty array, Borders: []. Why isn't the value of borderNames updated the DOM?