title: Searchin in bootstrap-vue table with pagination showing only the results in the actual page
body: <p>I am creating a <code>bootstrap-vue</code> table to show car listings using pagination, filters and Search.
  I am getting the data through an external API and using axios to populate the table with the data.</p>
  
  <p>For example, when I am on the second page and search for <code>car name</code> within the first page of the pagination, it will not find the results.</p>
  
  <p>I tried different solution from other answers but it seems no one is working </p>
  
  <p>This is the template code</p>
  
  <pre><code>&lt;template slot-scope="row"&gt;
    &lt;div&gt;
      &lt;b-form-group label-cols-sm="1" :label="search" class="mt-2 mr-2"&gt;
        &lt;b-input-group&gt;
          &lt;b-form-input v-model="filter" placeholder="Type to Search"&gt;
          &lt;/b-form-input&gt;
          &lt;b-input-group-append&gt;
            &lt;b-button :disabled="!filter" @click="filter = ''"&gt;
              {{ $t('labels.frontend.listings.clear') }}
            &lt;/b-button&gt;
          &lt;/b-input-group-append&gt;
        &lt;/b-input-group&gt;
      &lt;/b-form-group&gt;
      &lt;!--
      &lt;input type="checkbox" :value="items.id" v-model="selected" /&gt;
      --&gt;
      &lt;!-- eslint-disable --&gt;
      &lt;b-table
        striped
        hover
        :items="items"
        :fields="fields"
        :filter="filter"
        selectable
        :select-mode="selectMode"
        selected-variant="success"
        @row-selected="rowSelected"
        :current-page="currentPage"
        :per-page="perPage"
        :outlined="outlined"
        responsive
        autoWidth
      &gt;
        &lt;!-- eslint-disable --&gt;
        &lt;template slot="selected" slot-scope="{ rowSelected }"&gt;
          &lt;input type="checkbox" :value="items.id" v-model="selected" /&gt;
          &lt;span v-if="rowSelected"&gt;✔&lt;/span&gt;
        &lt;/template&gt;
        &lt;template slot="actions" slot-scope="row"&gt;
          &lt;b-button
            size="sm"
            :to="'/account/cars/' + row.item.id"
            class="mr-1"
          &gt;
            Information
          &lt;/b-button&gt;
        &lt;/template&gt;
        &lt;template slot="delete" slot-scope="row"&gt;
          &lt;b-button
            size="sm"
            @click="fireDelete(row.item, row.index)"
            class="mr-1"
            variant="danger"
          &gt;
            &lt;i class="fa fa-trash-o" aria-hidden="true"&gt;
            &lt;/i&gt;
          &lt;/b-button&gt;
        &lt;/template&gt;
      &lt;/b-table&gt;
      &lt;b-row&gt;
        &lt;b-col md="8" class="my-1"&gt;
          &lt;b-pagination
            v-model="currentPage"
            :total-rows="totalRows"
            :per-page="perPage"
            class="my-0"
          &gt;&lt;/b-pagination&gt;
        &lt;/b-col&gt;
        &lt;b-col md="4"&gt;
          &lt;b-form-group label-cols-sm="3" :label="page"&gt;
            &lt;b-form-select v-model="perPage" :options="pageOptions"&gt;&lt;/b-form-select&gt;
          &lt;/b-form-group&gt;
        &lt;/b-col&gt;
      &lt;/b-row&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  and this is the script code
  
  export default {
    data() {
      return {
        selectMode: 'multi',
        selected: [],
        filter: null,
        totalRows: 1,
        currentPage: 1,
        perPage: 15,
        pageOptions: [5, 15, 30],
        outlined: true,
        items: []
      }
    },
    mounted() {
      axios.get(this.$app.route('account.api.cars')).then(res =&gt; {
        for (let i in res.data) this.items.push(res.data[i])
        this.totalRows = this.items.length
      })
    }
  }
  </code></pre>
  
  <p>The default search method provided with the boostrap-vue search only the results in the actual page, is there anyway to search for the other items in the pagination?</p>