How to properly destructure data from API call and directly use variables?

I get data from an API call (Headless CMS Strapi) and I'm using this data inside my Template (I'm using VueJS). The way I have to access this data is very painful. What would be a good way to use the data I receive from the API?

<template>
    <div>
        {{ audioPlayer.data.attributes.text }}
        <img :src="audioPlayer.data.attributes.image.data.attributes.url" alt="">
    </div>
</template>

<script setup>
    const config = useRuntimeConfig();
    console.log(config.public.strapi.url)
    const { data: audioPlayer } = await useFetch(`${config.public.strapi.url}/api/audio-player?populate=image`)
</script>

I would like to somehow use it like this

<template>
    <div>
        {{ text }} // or {{ audioPlayer.text }}
        <img :src="image.url" alt="">
    </div>
</template>

Of course I can reassign every bit of data in a new variable so I can access it directly. But is this really the best way to go?