He estado trabajando con la última versión de Nuxt.js, Nuxt3. Estoy usando la API de recuperación para obtener datos JSON y usarlos para hacer otra solicitud. Aquí está mi código <script setup> :

 <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>

La consola da el siguiente resultado, lo que demuestra que la llamada de red funciona como se esperaba y el valor Ref se actualiza en consecuencia:

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

Pero en el sitio web, obtengo una matriz vacía, Borders: [] . ¿Por qué el valor de borderNames se actualiza en el DOM?