I brought this doubt because I already rode everything and I did not succeed. I have a project with laravel and for front I am using vue.

The project already searches for filtering and ordering by the fields, however the pagination was not successful. Among many tutorials, documents and videos, I tried to use one of these two components:

• link
• link

Someone who has been able to use it, could tell me where I'm going wrong? In the code below, I try to use the first component that is most functional.

Thanks in advance for the help.

blade.php

<example-component :arquivoftp="'{{ $arquivoFtp }}'"></example-component>

app.js

require('./bootstrap');

window.Vue = require('vue');

import Vue from 'vue'
import vPage from 'v-page';
Vue.use(vPage, {
    language: 'en',
    pageSizeMenu: [20, 100],
    totalRow: 200,
});

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app'
});

ExampleComponent.vue

<script>
export default {
  props: ["arquivoftp"],
  data() {
    return {
      list: [],
      colunaSort: "nome", //Coluna padrão para ordernar
      colunaOrder: "asc", //Opção de ascendente ou descendente, padrão inicia como asc
      busca: ""
    };
  },
  mounted() {
    this.list = JSON.parse(this.arquivoftp);
  },
  methods: {
    // Metodo que define qual a coluna que será ordernada e se é ascendente ou descendente
    sort: function(coluna) {
      // Se é a mesma coluna que está setando, então vai inverter a orderm de exibição
      if (this.colunaSort == coluna) {
        this.colunaOrder = this.colunaOrder == "asc" ? "desc" : "asc";
        // Se é uma coluna diferente, seta a coluna e define como ascendente
      } else {
        this.colunaSort = coluna;
        this.colunaOrder = "desc";
      }
    },
    //receive page info change callback
    pageChange(pInfo){
       console.log(pInfo);//{pageNumber: 1, pageSize: 10}
    }
  },
  computed: {
    // Metódo que faz o sort das colunas, definindo o nome da coluna e a ordem e a busca dos campos
    buscarOrdenado: function() {
      var ordenado = _.orderBy(this.list, this.colunaSort, this.colunaOrder);
      var self = this;
      return _.filter(ordenado, function(arquivo) {
        var busca = self.busca.toLowerCase();
        // Condição modifica o valor retornado do bd para impressão na view e permite a busca da mesma pelo texto
        if (arquivo.verificado == 1 || arquivo.verificado == "Verificado") {
          arquivo.verificado = "Verificado";
        } else {
          arquivo.verificado = "Não";
        }
        //  Campos que podem ser pesquisados(filtrados)
        return (
          arquivo.nome.toLowerCase().indexOf(busca) >= 0 ||
          arquivo.verificado.toLowerCase().indexOf(busca) >= 0
        );
      });
    }
  }
};
</script>
<template>
  <div>
    <table class="table table-sm table-striped table-hover">
      <thead>
        <tr>
          <td>
            <input
              type="text"
              class="form-control"
              placeholder="Buscar em todos os campos"
              v-model="busca"
            >
          </td>
        </tr>
        <tr>
          <th>
            <a href="#" v-on:click.prevent="sort('nome')">Nome</a>
          </th>
          <th>Selecionar</th>
          <th>
            <a href="#" v-on:click.prevent="sort('verificado')">Verificado</a>
          </th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(arquivo, index) in buscarOrdenado">
          <td v-if="arquivo.nome.includes('.xml') == true">{{ arquivo.nome }}</td>
          <td v-else>
            <a
              :href="'http://localhost/'+arquivo.ftp_origem+'/'+arquivo.nome"
            >{{arquivo.nome}} [ CLIQUE PARA VISUALIZAR ]</a>
          </td>
          <td v-if="arquivo.nome.includes('.xml') == true">
            <input type="checkbox" name="nome_arquivo[]" :value="arquivo.nome">
          </td>
          <td v-else></td>
          <td v-if="arquivo.nome.includes('.xml') == false"></td>
          <td v-else-if="arquivo.verificado == 'Não'">
            <font color="red">{{ arquivo.verificado }}</font>
          </td>
          <td v-else>{{ arquivo.verificado }}</td>
          <td>{{ index }}</td>
        </tr>
        <tr>
          <!-- v-bind 'setting' data to config page bar -->
          <!-- bind event 'page-change' to receive page info change -->
          <v-page :setting="pageSet" @page-change="pageChange"></v-page>
        </tr>
      </tbody>
    </table>
  </div>
</template>