fix: pages amount display

src/.vuepress/components/SearchPage.vue

 <template>
   <div>
     <SearchInput @search="onSearchInput" />
-
-    <SearchResultList
-      v-if="items.length > 0"
-      :items="items"
-      @page-change="onPageChange"
-    />
-    <SearchResultEmpty v-else />
+    <SearchResultList :items="items" />
+    <div class="text-center">
+      <v-pagination
+        v-if="items.length > 0"
+        v-model="page"
+        :length="pagesAmount"
+        :total-visible="7"
+      ></v-pagination>
+    </div>
   </div>
 </template>
 
@@ -25,7 +27,9 @@ export default {
     return {
       query: '',
       items: [],
-      size: 10
+      size: 20,
+      total: 0,
+      page: 1,
     }
   },
   watch:{
@@ -37,22 +41,29 @@ export default {
       },
       immediate: true,
     },
+    page: function() {
+      const from = this.size * (this.page - 1);
+      this.search(this.query, from, this.size);
+    }
+  },
+  computed: {
+    pagesAmount() {
+      return this.total > 0 ? Math.ceil(this.total / this.size) : 1;
+    }
   },
   methods: {
     onSearchInput(query) {
       this.query = query;
+      this.page = 1;
       this.search(this.query, 0, this.size)
     },
-    onPageChange(page) {
-      const from = this.size * (page - 1);
-      this.search(this.query, from, this.size);
-    },
     async search(value, from, size) {
       const searchResponse = await apiService.search(value, from, size);
 
       if (searchResponse) {
         const items = searchResponse.hits?.hits;
         if (items) {
+          this.total = searchResponse.hits?.total.value || 0;
           this.items = items.map(x=>({...x, searchTerm: value}));
         }
       }

src/.vuepress/components/SearchResultList.vue

@@ -3,6 +3,7 @@
     <v-list
       two-line
       subheader
+      v-if="items.length > 0"
     >
       <v-list-item v-for="item in items" :key="item.item">
         <v-list-item-content>
@@ -21,12 +22,7 @@
         </v-list-item-content>
       </v-list-item>
     </v-list>
-  <div class="text-center">
-    <v-pagination
-      v-model="page"
-      :length="6"
-    ></v-pagination>
-  </div>
+    <SearchResultEmpty v-else />
   </div>
 </template>
 
@@ -34,7 +30,6 @@
 export default {
   data() {
     return {
-      page: 1,
       languagesMap: {
         ara: 'Arabic',
         syc: 'Syriac',
@@ -50,7 +45,7 @@ export default {
     items: {
       type: Array,
       default: []
-    }
+    },
   },
   methods: {
     getLanguage(code) {