Componente de Paginación en Oruga UI Vue 3 y Laravel

Ya con el listado con la tabla de Oruga UI listo, lo siguiente que se va a realizar es la paginación; para ello, vamos a usar el componente de paginación de Oruga, que recibe varios parámetros; muchos de ellos de forma, para estilos y poco más:

• @change="updatePage" Evento que se ejecuta al dar un click sobre un enlace paginado, en estos casos debes de usarlo para actualizar el listado
• :total="posts.total" Indica el total de registros
• v-model:current="currentPage" Indica el v-model que se actualizará con el índice de la página actual
• :range-before="2" Cantidad de páginas que aparece antes de la página actual.
• :range-after="2" Cantidad de páginas que aparece después de la página actual.
• order="centered" Paginación centrada.
• size="small" Tipo de paginación.
• :simple="false" Diseño, si es simple o completa.
• rounded="true" Diseño redondeado.
• :per-page="posts.per_page" Cuantos registros vas a mostrar por páginas.

En Laravel, al usar el componente de paginación, tenemos todos estos parámetros ya definidos; por lo tanto, la integración es directa.

Finalmente, el componente de paginación con la tabla quedará como:

  ***
 </o-table>
    <br />
    <o-pagination
      v-if="posts.current_page && posts.data.length > 0"
      @change="updatePage"
      :total="posts.total"
      v-model:current="currentPage"
      :range-before="2"
      :range-after="2"
      order="centered"
      size="small"
      :simple="false"
      :rounded="true"
      :per-page="posts.per_page"
    >
    </o-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      posts: [],
      isLoading: true,
      currentPage:1,
    };
  },
methods: {
  updatePage(){
    setTimeout(this.listPage, 100);
  },
  listPage(){
    this.isLoading = true;
     this.$axios.get("/api/post?page="+this.currentPage).then((res) => {
      this.posts = res.data;
      console.log(this.posts);
      this.isLoading = false;
    });
  }
},
  async mounted() {
   this.listPage()
  },
};
</script>