Нужна помощь для реализации поиска и разбиения на страницы на сервере vuejs

Question

Я пытаюсь реализовать функцию поиска и разбиения на страницы на стороне сервера в vuejs. Я попробовал приведенный ниже код, но он работает на функцию изменения, и я хочу, чтобы результат поиска был нажатием клавиши, а также хочу реализовать нумерацию страниц.

<template>
    <div class="page-section">
        <input type="text" placeholder="Search" v-model="search" class="form-control" @change="getTemplateList">
        <table class="table">
                <tr v-for="item in items.data.TemplateList" :key="item.id">
                    <td>{{ item.title }}</td>
                    <td>{{ item.owner }}</td>
                    <td>{{ item.type }}</td>
                    <td>{{ item.lastUpdated }}</td>
                </tr>
        </table>
    </div>
</template>
<script>
import axios from 'axios'

export default {
    data() {
        return {
            items: [],
            sortBy: 'lastUpdated',
            sortType: 'Desc',
            filter: null,
            pageNumber: 0,
            pageSize: 15,
            search: '',
        }
    },
    mounted() {
        this.getTemplateList();
    },
    methods: {
        getTemplateList() {
            let self = this;
            axios.get('/api/items?freeText=' + this.search + '&pageNumber=' + this.pageNumber + '&pageSize=' + this.pageSize + '&sortBy=' + this.sortBy + ',' + this.sortType + '')
                .then(function (response) {
                    self.items = response.data;
                }).catch(function (error) {
                    alert(error);
                });
        }
    }
}
</script>