Obtengo datos de una llamada API (Headless CMS Strapi) y estoy usando estos datos dentro de mi plantilla (estoy usando VueJS). La forma en que tengo que acceder a estos datos es muy dolorosa. ¿Cuál sería una buena forma de utilizar los datos que recibo de la 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>

Me gustaría usarlo de alguna manera así.

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

Por supuesto, puedo reasignar cada bit de datos en una nueva variable para poder acceder a ellos directamente. Pero, ¿es esta realmente la mejor manera de hacerlo?