How to output data to a vue component that is being used in another component?

Question

Vue.js

I am making a component that will bring users to the main page.
First did

component

<template>
  <layout title="Users">
    <div class="container mt-5">
      <h2>Laravel Inertia JS Pagination Demo</h2>
      <table class="table w-full">
        <thead>
          <tr>
            <th>#ID</th>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in usersList.data" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.email }}</td>
          </tr>
        </tbody>
      </table>

      <Pagination class="mt-6" :links="usersList.links" />
    </div>
  </layout>
</template>

<script>
import Pagination from '@/Pages/Pagination'
export default {
  components: {
    Pagination
  },
  props: {
    usersList: Object,
  },
  }
</script>

to him

router

Route::get('users', [IndexController::class, 'index'])
    ->name('users');

Well

controller

public function index()
  {

$usersList = User::orderBy('id', 'desc')->paginate(3);

      return Inertia::render('Users', [
          'usersList' => $usersList
      ]);
  }

When you go to the "users" address, everything works and is displayed, but I want to use this component in other components, for example, I display the component on the main one, and then, as far as I understand, you need

make a request in the user component through axios

<template>
  <layout title="Users">
    <div class="container mt-5">

      <h2>Laravel Inertia JS Pagination Demo</h2>

      <table class="table w-full">
        <thead>
          <tr>
            <th>#ID</th>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in usersList.data" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.email }}</td>
          </tr>
        </tbody>
      </table>

      <Pagination class="mt-6" :links="usersList.links" />
    </div>
  </layout>
</template>

<script>
import Pagination from '@/Pages/Pagination'

export default {
  components: {
    Pagination
  },
  props: {
    usersList: Object,
  },
  methods: {
     fetch() {
         axios.get('/users')
     },
 },
 created() {
     this.fetch()
   }
  }
</script>

but it gives me an error that it cannot read the date

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'data')

Tell me how to display data in a component that I use in another component?

Answer 1

If you make a request through api, then you need not in props but in data

export default {
  components: {
    Pagination
  },
  data() {
    return {
      usersList: null,
    }
  },
  methods: {
     async fetch() {
         this.usersList = await axios.get('/users')
     },
 },
 created() {
     this.fetch()
   }
  }