How to filter a table with a page?

I have a paged table, I also have a js function to filter data; only that the data is filtered in the current page and not in all the data

this is the view:

<table class="table table-hover table-striped table-bordered" id="MyTable">
                <thead>
                    <tr>
                        <th>DNI</th>
                        <th>Apellidos y Nombres</th>
                        <th colspan="3"><center>Acciones</center></th>
                    </tr>
                    <tr>
                      <td colspan="5">
                        <input id="buscar" type="text" class="form-control" placeholder="Escriba algo para filtrar" />
                      </td>
                    </tr>
                </thead>
                <tbody>
                     <tr v-for="persona in personas">
                         <td width="10px">@{{ persona.PERS_varDNI}}</td>
                         <td>@{{ persona.PERS_varApPaterno}} @{{ persona.PERS_varApMaterno}}, @{{ persona.PERS_varNombres}}</td>
                         <td width="10px">
                             <a href="#" class="btn btn-primary btn-sm">Agregar contrato</a>                
                         </td>
                         <td width="10px">
                             <a href="#" class="btn btn-warning btn-sm" v-on:click.prevent="editPersona(persona)">Editar</a>                
                         </td>
                         <td width="10px">
                             <a href="#" class="btn btn-danger btn-sm" v-on:click.prevent="deletePersonas(persona.PERS_varDNI)">Eliminar</a>
                         </td>
                     </tr>    
                </tbody>                
            </table>
            <nav>
                <ul class="pagination">
                    <li v-if="pagination.current_page > 1">
                        <a href="#" @click.prevent="changePage(pagination.current_page - 1)">
                            <span>Atras</span>
                        </a>
                    </li>

                    <li v-for="page in pagesNumber" v-bind:class="[ page == isActived ? 'active':'']">
                        <a href="#" @click.prevent="changePage(page)">
                            @{{ page }}
                        </a>
                    </li>

                    <li v-if="pagination.current_page < pagination.last_page">
                        <a href="#" @click.prevent="changePage(pagination.current_page + 1)">
                            <span>Siguiente</span>
                        </a>
                    </li>
                </ul>
            </nav>

the js is:

<script type="text/javascript">
    var busqueda = document.getElementById('buscar');
    var table = document.getElementById("MyTable").tBodies[0];

    buscaTabla = function(){
      texto = busqueda.value.toLowerCase();
      var r=0;
      while(row = table.rows[r++])
      {
        if ( row.innerText.toLowerCase().indexOf(texto) !== -1 )
          row.style.display = null;
        else
          row.style.display = 'none';
      }
    }

    busqueda.addEventListener('keyup', buscaTabla);
</script>

the functions in vuejs are:

getPersonas:function(page){
            var urlPersona='personas?page='+page;
            axios.get(urlPersona).then(response=>{
                this.personas=response.data.personas.data,
                this.pagination=response.data.pagination
            });
        },
changePage: function(page){

            this.pagination.current_page = page;
            this.getPersonas(page);            
        }

and the driver to retrieve the data:

public function index(Request $request)
    {
        //
        $personas=\DB::table('personas')->paginate(10);
        return [
            'pagination' => [
                'total' => $personas->total(),
                'current_page' => $personas->currentPage(),
                'per_page' => $personas->perPage(),
                'last_page' => $personas->lastPage(),
                'from' => $personas->firstItem(),
                'to' => $personas->lastItem(),
            ],
            'personas' => $personas
        ];
    }

the filter only works on the current page, I need it to be filtered on all the pages