Estoy trabajando en una aplicación Vue 3. Me encontré con un problema al trabajar con un componente y uno de sus subcomponentes <User /> .

En App.vue:

 <template> <Navbar /> <Sidebar /> <Content title="Users" /> <Footer /> </template> <script> import Navbar from './components/Navbar.vue' import Content from './components/Content.vue' import Sidebar from './components/Sidebar.vue' import Footer from './components/Footer.vue' export default { name: 'App', components: { Navbar, Content, Sidebar, Footer }, data() { return { url: 'https://jsonplaceholder.typicode.com', users: [], } }, async mounted() { // Users await this.axios.get(`${this.url}/users`).then((response) => { if (response.data.code == 200) { this.users = response.data.data; console.log(this.users); } }).catch((errors) => { console.log(errors); }); } } </script>

En Navbar.vue:

 <template> <a class="navbar-brand" href="#">My App</a> <User :users='users' /> </template> <script> import User from './User.vue' export default { name: 'Navbar', components: { User } } </script>

En User.vue, trato de mostrar el nombre completo del usuario de esa manera, ya que typeof(users) devuelve el object :

 <template> {{ users.firstName }} {{ users.lastName }} </template> <script> export default { name: 'User', props: { users: Object } } </script>

El problema

Recibo este error en la consola: TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'firstName').

¿Dónde está mi error?