Estaba siguiendo un tutorial sobre el aprendizaje de Vuejs 3 y, por alguna razón, después de definir mi objeto reactivo, ninguna de las propiedades está disponible o es visible en vue-devtools. Los nombres de pokemon que estoy tratando de representar no aparecen porque la propiedad pokemons no está disponible. ¿Puede alguien ayudarme a averiguar qué está pasando? aquí está mi código a continuación:

HomeView.vue:

 <template> <div class="home"> <h3>Hello World!</h3> <p>{{number}}</p> <ul> <li v-for="pokemon in pokemons" :key="pokemon.name" >{{pokemon.name}}</li> </ul> </div> </template> <script> import axios from "axios"; import { onMounted } from '@vue/runtime-core'; import { reactive } from "vue"; // @ is an alias to /src export default { name: 'HomeView', setup(){ let number = 1; const state = reactive({ pokemons:[], urlIdLookup: {} }) onMounted( async () =>{ try { const pokemonReq = await axios.get("https://pokeapi.co/api/v2/pokemon?"); console.log("data", pokemonReq.data); console.log("state", state) state.pokemons = pokemonReq.data.results; } catch(err){ console.log(err); } }); } } </script>

Aplicación.vue:

 <template> <div class="p-14"> <router-link class="flex justify-center text-4xl text-yellow-700" to="/">Pokemon Picker</router-link> </div> <router-view/> </template> <style> </style>

enrutador > index.js

 import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/about/:slug', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router