Как сделать переменную доступной для дочернего компонента в этом приложении Vue 3?

Я работаю над приложением Вью 3. Я столкнулся с проблемой при работе с родительский компонент, дочерним компонентом и компонент внука.

В Main.vue (родительский компонент):

<template>
    <div class="main">
        <h1>{{ title }}</h1>
        <Filters
         :usersData='users' 
        />
    </div>
</template>

<script>
    import Filters from './Ui/Filters'
    export default {
      name: 'Posts',
      components: {
        Filters
      },
      props: {
        title: String,
      },
    }
</script>

В ребенокFilters.vue:

<template>
    <label>Filter by author</label>
    <MyDropdown
        label="All authors" 
        :usersData='users'
        />
</template>

<script>
    import MyDropdown from './MyDropdown'
    import MyButton from './MyButton'

    export default {

      name: 'Filters',

      components: {
        MyDropdown,
        MyButton
      },

      props: {
        usersData: Object
     },

    data() {
        return {
          url: 'https://jsonplaceholder.typicode.com',
          users: [],
        }
    },
    async mounted() {
        // Users
        await this.axios.get(`${this.url}/users`).then((response) => {
          if (response.status == 200) {
            this.users = response.data;
            console.log(this.users); // outputs the users correctly
          }
        }).catch((errors) => {
          console.log(errors);
        });
      }
    }
</script>

Tn компонент внука MyDropdown.vue:

<template>
  <div class="dropdown">
    <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown">
       {{ label }}
    </button>
    <ul v-if="usersData.length" class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Jane Doe</a></li>
        <li><a class="dropdown-item" href="#">John Doe</a></li>
    </ul>
  </div>
</template>

<script>
    export default {
      name: 'MyDropdown',
      props: {
        label: String,
        usersData: Object
      }
    }
</script>

Эта проблема

Пока присутствует v-if="usersData.length, я получаю эту ошибку в консоли:

Невозможно прочитать свойства неопределенного (чтение «длина»)

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