Vuetify server data table pagination not working correctly

I'm trying to implement a server datatable that gets populated from an API request (response returns data & meta).

However, the pagination buttons to go to next pages are not working properly. When data loads they get enabled than disabled instantly. The backend returns correct data, and when I click fast on next page button OnPageChange() is trigged and prints the next page (2).

I declared the v-data-table as follow:

<v-data-table 
        v-model:items-per-page="itemsPerPage" 
        :headers="headers" 
        :items="users"
        :server-items-length="totalItems" 
        :loading="loading" 
        item-key="id"           
        @update:options="fetchUsers({ page: page, itemsPerPage: itemsPerPage, search: search })"   
        :items-per-page-options="itemsPerPageOptions" 
        :page="page" @update:page="onPageChange">

the script has :

data() {
        return {
            users: [],
            totalItems: 1,
            itemsPerPage: 5,
            page: 1,
            loading: false,
            search: '',
            itemsPerPageOptions: [5, 10, 50],
            ...

methods: {
        async fetchUsers({ page, itemsPerPage, search = this.search }) {
            this.loading = true;

            try {
                const response = await axios.get(`/users`, {
                    params: {
                        page,
                        per_page: itemsPerPage,
                        search: this.search.trim() || '',
                    },
                });

                this.users = response.data.data;
                this.totalItems = response.data.meta.total;

            } catch (error) {
                console.error('Error fetching users:', error);
            } finally {
                this.loading = false;
            }
        },
        onPageChange(newPage) {
            this.page = newPage;
            console.log(newPage);
            this.fetchUsers({
                page: this.page,
                itemsPerPage: this.itemsPerPage,
                search: this.search
            });
        },

Is there a bug with vuetify pagination or am I missing something?

I was able to resolve it by declaring the table as v-data-table-server instead of v-data-table (thanks @MoritzRingler) :

<v-data-table-server v-model:items-per-page="itemsPerPage" :headers="headers" :items="users"
        :items-length="totalItems" :loading="loading" item-key="id"
        @update:options="fetchUsers({ page: page, itemsPerPage: itemsPerPage, search: search })"
        :items-per-page-options="itemsPerPageOptions" :page="page" @update:page="onPageChange">

Also make sure the data from backend is sent with 'total', 'per_page', 'current_page', 'last_page', 'next_page_url', 'prev_page_url' fields.