Así es como puedes mejorar tu código

 <template> <div class="container"> <div> <NuxtLogo /> <h1 class="title">planet.title here => {{ planet.title }}</h1> <pre> $data here => {{ $data }}</pre> <section> <div v-for="planet in planets" :key="planet.slug"> <p>Title of my planet: {{ planet.title }}</p> </div> </section> </div> </div> </template> <script> export default { async asyncData() { const call = await fetch('https://api.nuxtjs.dev/planets') const planets = await call.json() return { planets } } } </script> <style> .container { margin: 0 auto; min-height: 100vh; display: flex; justify-content: center; align-items: center; } </style>

PD: no olvides la :key .

La API devuelve una matriz. Si quieres acceder al title del primer planeta, usa planet[0].title .

Por supuesto, también puede hacer un bucle en toda la matriz con v-for . Más información aquí: https://vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for

planet como puede ver cuando muestra la variable $data es una matriz de planetas.

Debe cambiar el nombre de la variable planet a planets para que represente mejor su contenido.

Para mostrar un planeta, debe obtenerlo de la matriz de planets :

 <template> <div class="container"> <div> <NuxtLogo /> <h1 class="title">earth.title here => {{ earth.title }}</h1> </div> </div> </template> <script> import NuxtLogo from "~/components/NuxtLogo"; export default { components: {NuxtLogo}, async asyncData() { const planets = await fetch('https://api.nuxtjs.dev/planets') .then((res) => res.json()) const earth = planets[0]; return { planets, earth } } } </script>

Parece que Planet es una matriz, por lo que debe iterar sobre la matriz y luego imprimir los valores que desea para esa matriz, intente con

 <ul> <li v-for="item in planets"> {{ item.title}} </li> </ul>