Vuejs & yajra datatable as API

datatable.vue

<template>
  <div class="container-fluid">
    <client-only>
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="card">
            <div class="header">
              <h2>Report > Test report</h2>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <div class="card">
            <div class="header">
              <h2>Test report</h2>
            </div>
            <div class="body">
              <table
                id="dt-html-builder"
                class="
                  display
                  table table-checkable
                  order-column
                  m-t-20
                  width-per-100
                  table-bordered table-striped table-hover
                  ic-datatable
                  dataTable
                "
              >
                <thead>
                  <tr role="row">
                    <th></th>
                    <th>SL#</th>
                    <th>MANUFACTURER NAME</th>
                  </tr>
                </thead>
              </table>
            </div>
          </div>
        </div>
      </div>
    </client-only>
  </div>
</template>


<script>
export default {
  name: 'ProductReport',
  data() {
    return {
      auth_token: '',
    }
  },
  mounted() {
    const self = this
    self.auth_token = self.$store.getters['auth/get_token']
    self.$nextTick(() => {
      self.initDataTable()
    })
  },
  methods: {
    initDataTable() {
      const self = this
      let datatable = $('#dt-html-builder').DataTable({
        serverSide: true,
        processing: true,
        ajax: {
          beforeSend: function (xhr) {
            xhr.setRequestHeader('Authorization', 'Bearer ' + self.auth_token)
          },
          url: 'http://talamus-health-inc.test/api/offline/test-api',
          type: 'GET',
          data: function (data) {
            for (var i = 0, len = data.columns.length; i < len; i++) {
              if (!data.columns[i].search.value) delete data.columns[i].search
              if (data.columns[i].searchable === true)
                delete data.columns[i].searchable
              if (data.columns[i].orderable === true)
                delete data.columns[i].orderable
              if (data.columns[i].data === data.columns[i].name)
                delete data.columns[i].name
            }
            delete data.search.regex
          },
        },
        columns: [
          {
            name: 'id',
            data: 'id',
            title: 'ID',
            visible: false,
            orderable: true,
            searchable: true,
          },
          {
            name: 'DT_RowIndex',
            data: 'DT_RowIndex',
            defaultContent: '',
            title: 'SL#',
            render: null,
            orderable: false,
            searchable: false,
          },
          {
            name: 'product_brand_name',
            data: 'product_brand_name',
            title: 'MANUFACTURER NAME',
            orderable: true,
            searchable: true,
          },
        ],
        dom: 'Blfrtip',
        order: [[0, 'desc']],
        buttons: ['csv', 'excel', 'pdf', 'print'],
      })
    },
  },
}
</script>

<style>
</style>

VueDataTablePaginationController.php

public function testPaginateApi(ProductDataTable $dataTables)
{
     return $dataTables->ajax();
}

@RiazHossainFahad check it.