docs(pagination): fix bugs in Pagination use case example in docs (#1492)

* fix(Paginated): fix bugs in Pagination use case example in docs

Reset the current offset each type the search query changes; otherwise
there may be no results shown if the user clicked forward one or more
pages and then typed to search.

Replace instances of magic number 10 with the "limit" variable;
otherwise changing the value of the "limit" data prop will result in
buggy behavior because clicking forward and back still updates the
offset by 10.

Convert query and country name strings to lower case before filtering
the list so that the user doesn't have to match the exact case of the
country names.

* Update Paginated.vue

Co-authored-by: Jeff Sagal <sagalbot@gmail.com>

docs/.vuepress/components/Paginated.vue

@@ -1,12 +1,8 @@
 <template>
-  <v-select
-    :options="paginated"
-    :filterable="false"
-    @search="(query) => (search = query)"
-  >
+  <v-select :options="paginated" :filterable="false" @search="onSearch">
     <li slot="list-footer" class="pagination">
-      <button :disabled="!hasPrevPage" @click="offset -= 10">Prev</button>
-      <button :disabled="!hasNextPage" @click="offset += 10">Next</button>
+      <button :disabled="!hasPrevPage" @click="offset -= limit">Prev</button>
+      <button :disabled="!hasNextPage" @click="offset += limit">Next</button>
     </li>
   </v-select>
 </template>
@@ -22,24 +18,32 @@ export default {
   }),
   computed: {
     filtered() {
-      return this.countries.filter((country) => country.includes(this.search))
+      return this.countries.filter((country) =>
+        country.toLocaleLowerCase().includes(this.search.toLocaleLowerCase())
+      )
     },
     paginated() {
       return this.filtered.slice(this.offset, this.limit + this.offset)
     },
     hasNextPage() {
-      const nextOffset = this.offset + 10
+      const nextOffset = this.offset + this.limit
       return Boolean(
         this.filtered.slice(nextOffset, this.limit + nextOffset).length
       )
     },
     hasPrevPage() {
-      const prevOffset = this.offset - 10
+      const prevOffset = this.offset - this.limit
       return Boolean(
         this.filtered.slice(prevOffset, this.limit + prevOffset).length
       )
     },
   },
+  methods: {
+    onSearch(query) {
+      this.search = query
+      this.offset = 0
+    },
+  },
 }
 </script>