Что вызывает эту ошибку при передаче объекта из основного компонента в дочерний компонент в приложении Vue 3?

Я работаю над приложением Vue 3. Я столкнулся с проблемой при работе с компонентом и одним из его <User /> подкомпонентов.

В 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>

В 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>

В User.vue я пытаюсь вывести полное имя пользователя, так как typeof(users) retuens object:

<template>
    {{ users.firstName }} {{ users.lastName }}
</template>

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

Эта проблема

Я получаю эту ошибку в консоли: Uncaught TypeError: Не удается прочитать свойства неопределенного (чтение «firstName»).

Где моя ошибка?