Here is the structure of my Nuxt 3 / Vue 3 component using script setup:
<script setup>
const content = await useFetch('/api/items/published').then((res) => res.data)
const items = await content.data.items
const issues = await content.data.issues
</script>
<template>
<Gallery :items="items" :layout="layout" @sponsorModalOpen="sponsorModalOpen()" />
</template>
The values of items and issues are coming back as Undefined, possibly because they are not waiting for the initial async call with useFetch to finish before being defined. This behavior seems counterintuitive, as I would expect both the await on useFetch and the variable declarations to block until the prerequisite task is completed.
When I modify the code to directly pass content to the Gallery component like this, it works:
<Gallery :items="content?.items" :layout="layout" @sponsorModalOpen="sponsorModalOpen()" />
It appears that this only functions correctly with optional chaining, indicating that the prop is initially rendered as undefined but updates once the asynchronous fetch operation is done.
Am I misunderstanding the usage of await here? How can I ensure that the variables are not assigned values until the async task is finished, so I can manipulate them (specifically reordering the results)?