How can I access the data I fetched with graphql?

So I have Nuxt 3, and Strapi with graphql. I want to get the data from Strapi via Graphql

This works for the full data:

<template>
    <div>
    <p> {{ data }}</p>
</div>
</template>

<script setup lang="ts">

    const query = gql`
    query headerPicMediaUrl {
    productsMedias{
        data{
            id
                attributes{
                    HeaderPic1{data{attributes{url}}}
                }
            }
        }
    }  
    `
    const { data } = await useAsyncQuery(query)
    const props = defineProps({
        headerurl: {
            type: String,
            required: true
        }
    })
</script>

my page then showns within the p : { "productsMedias": { "data": [ { "id": "1", "attributes": { "HeaderPic1": { "data": { "attributes": { "url": "/uploads/20230131_034_LR_2x_e21d80c0c9.webp", "__typename": "UploadFile" }, "__typename": "UploadFileEntity" }, "__typename": "UploadFileEntityResponse" }, "__typename": "ProductsMedia" }, "__typename": "ProductsMediaEntity" } ], "__typename": "ProductsMediaEntityResponseCollection" } }
but if I want more specific data and I change the template to this:

<template>
    <div>
    <p> {{ data.productsMedias }}</p>    
</div>
</template>

VS codes markes the data red and says '__VLS_ctx.data' is of type 'unknown'.
If I try to load the page now it just stays blank (so the header isnt loaded too) and the browser console throws Uncaught (in promise) TypeError: $setup.data is null

I also tried calling it like this

<template>
    <div>
    <p> {{ data['productsMedias'] }}</p>
</div>
</template>

But I get the same error/problems

What am I doing wrong here and how do I get it to work?