Why can't I access useAsyncData for an if statement in a Nuxt 3 script settings tag?

Question

I'm using the Prismic API to get some data that I want to display in a Nuxt3 template.

Everything works fine, I just want to show a 404 page when there is no data, not a 500 error. I added a check to see if the data is empty:

<script setup>
    const route = useRoute()
    const name = route.params.werke;
    const { client } = usePrismic()
    const { data: werk } = await useAsyncData('werk', () => client.getByUID("werk", name))
    if (!werk.uid) {
     throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
    }

</script>

The problem is that in the if (!werk.uid) section werk.uid is always empty. So I always get a 404 error. In my template, werk.uid is not empty, so I think there is a problem, the if statement cannot access the const variable using useAsyncData?

Any ideas? The official documentation recommended me in a similar way: https://v3.nuxtjs.org/getting-started/error-handling/#example-1

Answer 1

Someone in the Prism forum helped me find a solution. This is a Vue 3 specific issue:

You need to use .value after werk: (!werk.value). Not just (werk.anything)