Laravel 8 Pagination By Using Vue Js Example

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\CompanyName;

class CompanyNameController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $data = CompanyName::paginate(2);
        return response()->json($data);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
       
        $company = new CompanyName([
            'company_name' => $request->input('company_name'),
            'detail' => $request->input('detail')
        ]);
        $company->save();

        return response()->json('Company created!');
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        $company = CompanyName::find($id);
        return response()->json($company);
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $company = CompanyName::find($id);
        $company->update($request->all());

        return response()->json('Company updated!');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $company = CompanyName::find($id);
        $company->delete();

        return response()->json('Company deleted!');
    }
}

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

import Vue from 'vue'

import App from './App.vue';
import VueAxios from 'vue-axios';
import VueRouter from 'vue-router';
import axios from 'axios';
import {
    routes
} from './routes';


Vue.use(VueRouter);
Vue.use(VueAxios, axios);
Vue.component('pagination', require('laravel-vue-pagination'));

const router = new VueRouter({
    mode: 'history',
    routes: routes
});

const app = new Vue({
    el: '#app',
    router: router,
    render: h => h(App),
});

<template>
  <div>
    <h2 class="text-center">Company List</h2>

    <table class="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Detail</th>
          <!-- <th>Actions</th> -->
        </tr>
      </thead>
      <tbody>
        <tr v-for="company in company_name.data" :key="company.id">
          <td>{{ company.id }}</td>
          <td>{{ company.company_name }}</td>
          <td>{{ company.detail }}</td>
          <td>
            <div class="btn-group" role="group">
              <router-link
                :to="{name: 'edit', params: { id: company.id }}"
                class="btn btn-success"
              >Edit</router-link>
              <button class="btn btn-danger" @click="deleteCompany(company.id)">Delete</button>
            </div>
          </td>
        </tr>
      </tbody>
      <pagination :data="company_name" @pagination-change-page="getResults"></pagination>
    </table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      company_name: []
    };
  },
  created() {
    this.getResults();
  },
  methods: {
    deleteCompany(id) {
      this.axios
        .delete(`http://localhost:8000/api/Company/${id}`)
        .then(response => {
          let i = this.company_name.map(data => data.id).indexOf(id);
          this.company_name.splice(i, 1);
        });
    },
    getResults(page) {
      if (typeof page === "undefined") {
        page = 1;
      }
      this.axios
        .get("http://localhost:8000/api/Company?page=" + page)
        .then(response => {
          this.company_name = response.data;
          console.log(company_name);
        });
    }
  }
};
</script>