In my vue.js application, I have a list of users with backend pagination. Now I want to implement a search functionality. I attempted to call the method like this:

  watch: {
     search: function() {
        Crud.methods.getItems();
       }
    },

However, I encountered an error stating 'pagination is not defined' in my .vue file.

<template>
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-md-2">
                    <router-link :to="{ name: 'districts'}">
                               <span class="glyphicon glyphicon-chevron-left"></span>
                            </router-link>
                        {{ title }} {{pageTitle}}
                    </div>
                     <div class="col-md-4 search-wrapper">
                       <input type="text" v-model="search" 
                    placeholder="Search users.."/>
                    </div>
                    <div class="col-md-6 text-right">
                        <create-button :name="module+'-create'"></create-button>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <crud-index :columns="columns" :loading="loading" 
                   :pagination="pagination" @changePage="changePage">
                    <tr v-for="(item,index) in items" :key="item.id">
                        <td>{{ doMath(index) }}</td>
                        <td>
                            <router-link :to="{ name: 'users-edit', params: { id: item.id, disId:id }}">
                                {{ item.email }}
                            </router-link>
                        </td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.contact }}</td>
                        <td>{{ item.address }}</td>
                        <td>{{ item.age }}</td>
                        <td>{{ (item.gender==1)?'Male':''}} 
                        {{(item.gender==2)?'Female':''}}</td>
                        <td>{{ item.created_at }}</td>
                    </tr>
                </crud-index>
            </div>
        </div>
       </div>
       </div>
     </template>

     <script>
    import Crud from '../../components/Crud/Crud';
    import CrudIndex from '../../components/Crud/Index.vue';
    import CreateButton from "../../components/Crud/CreateButton.vue";

  export default {
    name: 'UsersIndex',
    mixins: [Crud],
    components: {
        CreateButton,
        CrudIndex
    },
    data() {
        return {
            columns: [
                {id: 0, name: 'ID', width: 5},
                {id: 1, name: 'E-mail', width: 20},
                {id: 2, name: 'Name', width: 20},
                {id: 3, name: 'Contact', width: 15},
                {id: 4, name: 'address', width: 20},
                {id: 5, name: 'age', width: 5},
                {id: 6, name: 'gender', width: 10},
                {id: 7, name: 'Created at', width: 20},
            ],
            search: '',
        };
    },
    watch: {
     search: function() {
        console.log(this.search);
        Crud.data();
        Crud.methods.getItems();
       }
    },
    methods:{
        doMath: function (index) {
         return (index+1) + ((this.pagination.currentPage-1)*5);
         }
    }
   };
   </script>

In my crud.js file, I need to set the "search" variable and call the getItems() method:

export default {
props: [],
data() {
    return {
        indexx: 0,
        loading: true,
        items: [],
        pageTitle: '',
        id: this.$route.params.id,
        search: this.$route.params.search,
        pagination: {
            isLoading: true
        },
    };
},
computed: {
    apiUrl() {
        return this.$store.getters.apiUrl;
    },
    module() {
        return this.$store.getters.module;
    },
    title() {
        return this.$store.getters.title;
    },
},
mounted() {
    this.getItems().then(() => {
        this.loading = false;
    });
},
methods: {
    getItems(page = 1) {
        return new Promise((resolve) => {
            this.setPaginationLoading();
            this.$http.get(this.getUrl(page)).then((response) => {
                this.items = response.data.data;
                this.setPagination(response.data);
                resolve();
            }, () => {
                this.$swal("Something went wrong. Try again!", '', "error");
            });
        });
    },
    getUrl(page = 1) {
        if (this.module == 'users') {
            let query = '&search=' + this.search;
            console.log('In nationality ', nation);
            return this.$store.getters.apiUrl + this.module + '?page=' + page + query;
        } else {
            return this.$store.getters.apiUrl + this.module + '/?page=' + page;
        }
    },
    setPaginationLoading() {
        this.pagination.isLoading = true;
    },
    setPagination(data) {
        this.pagination = {
            currentPage: data.meta.current_page,
            from: data.meta.from,
            lastPage: data.meta.last_page,
            to: data.meta.to,
            total: data.meta.total,
            isLoading: false
        };
    },
    changePage(page) {
        this.getItems(page);
    },
  },
};

}