Corrige tabela e paginacao

src/routes/videos/index.vue

@@ -18,7 +18,7 @@
           <Button
             label="Buscar"
             :loading="loading"
-            @click="handleSearch"
+            @click="handleSearch(pagination)"
             fullWidth
           />
         </div>
@@ -29,7 +29,9 @@
       :columns="columns"
       :rows="rows"
       :pagination="pagination"
+      :loading="loading"
       row-key="id"
+      @update:pagination="updatePagination"
     >
       <template #no-data>
         <div
@@ -58,8 +60,43 @@ const columns = [
     align: "left",
     field: "id",
   },
+  {
+    name: "title",
+    label: "Título",
+    align: "center",
+    field: "title",
+  },
+  {
+    name: "clips_quantity",
+    label: "Clipes",
+    align: "left",
+    field: "clips_quantity",
+  },
+  {
+    name: "videoid",
+    label: "VideoID",
+    field: "videoid",
+  },
+  {
+    name: "situation",
+    label: "Situação",
+    field: "situation",
+  },
 ];
 
+/*
+{
+    "id": 195,
+    "title": "VIDA EXTRATERRESTRE: FINALMENTE ENCONTRADA A EVIDÊNCIA + AGUARDADA...",
+    "url": "https://www.youtube.com/watch?v=2iU7oAmQROQ",
+    "situation": "CONCLUIDO",
+    "clips_quantity": 3,
+    "videoid": "2iU7oAmQROQ",
+    "filename": "VIDA_EXTRATERRESTRE_FINALMENTE_ENCONTRADA_A_EVIDENCIA_AGUARDADA_medium.mp4",
+    "datetime_download": "Invalid Date"
+}
+*/
+
 export default {
   name: "UserList",
   components: {
@@ -74,18 +111,26 @@ export default {
       loading: false,
       pagination: {
         page: 1,
-        totalPages: 1,
-        total: 10,
+        direction: "desc",
         perPage: 10,
+        total: 10,
+        totalPages: 1,
+        hasNext: false,
+        hasPrev: false,
       },
     };
   },
   methods: {
-    async handleSearch() {
+    async handleSearch(pagination) {
       try {
         this.loading = true;
 
-        const { data } = await API.get("/videos");
+        const { data } = await API.get("/videos", {
+          params: {
+            perPage: pagination.perPage,
+            page: pagination.page,
+          },
+        });
 
         this.rows = data.content;
         this.pagination = data.pagination;
@@ -98,6 +143,9 @@ export default {
         this.loading = false;
       }
     },
+    updatePagination(pagination) {
+      this.handleSearch(pagination);
+    },
   },
 };
 </script>