Adding pagination for api endpoints

public function index() {
   return IssueResource::collection(Issue::paginate(10));
}

Step 02: Now for vue js part, laravel vue pagination package needs to be setup with npm

npm install laravel-vue-pagination

Step 03: Then, back in composable issues.js the code changes will be like below where two things are changed.

import { ref } from 'vue'

export default function useIssues() {
    const issues = ref({})

    const getIssues = async (page = 1) => { 
        axios.get('/api/issues?page=' + page)
            .then(response => {
                issues.value = response.data;
            })
    }
    return { issues, getIssues }
}

Code above, issues variable has become object from array ( previously created as array ).
Necessary parameter ( page ) is added inside getIssues() method for pagination.
Also issues.value has been initialized with necessary api endpoint response pattern "response.data"

Step 04: Lastly, making three changes like below to vue component Index.vue under resources/js/components/Issues folder like below for adding pagination

<template>    
  <h1>Client Issues </h1>
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th>ID</th>
      <th>Title</th>
      <th>Description</th>
      <th>Created</th>
    </tr>
  </thead>
  <tbody>
      <tr v-for="issue in issues.data">
          <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">
              {{ issue.id }}
          </td>
          <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">
              {{ issue.title }}
          </td>
          <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">
              {{ issue.description }}
          </td>
          <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900">
              {{ issue.created_at }}
          </td>
      </tr>
  </tbody>
</table>   
<div class="d-flex justify-content-center mt-4">
    <Bootstrap4Pagination 
        :data="issues" 
        @pagination-change-page="getIssues"
        class="pagination pagination-dark"
    />
</div>
</template>

<script setup>

import { onMounted } from "vue";
import useIssues from "../../composables/issues";
import { Bootstrap4Pagination } from 'laravel-vue-pagination';

const { issues, getIssues } = useIssues()
onMounted(() => {
  getIssues()
})

</script>

<style>
.pagination-dark .page-link {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
}

.pagination-dark .page-item.active .page-link {
    background-color: #333 !important;
    border-color: #333 !important;
}

.pagination-dark .page-link:hover {
    background-color: #333 !important;
    color: #fff !important;
    border-color: #333 !important;
}
</style>

Here above, firstly, instead of issues it will be issues.data.
Secondly, laravel-vue-pagination plugin is being imported.
Finally, template of boostrap4 pagination is being added for rendering pagination with necessary parameters.