Как реализовать подгрузку следующих 50 элементов в пагинации?

Question

[asd dsa]

Привет, не серверной части реализована подгрузка элементов с лимитом в 50 штук на страницу, как реализовать пагинацию таким образом, что бы если всех элементов больше 50 то подтягивать следующую страницу с сервера и пагинировать её вместе с 1?

Запрос на сервер:

apollo: {
        users: {
            query: gql`query users($input: ReadUsersInput){
                users(input: $input){
                    users {
                        id
                        email
                        lastName
                        firstName
                        groups
                        connection
                    }
                }
            }`,
            variables: {
                input: {
                    page: {
                        start: 0,  // страница с элементами
                        limit: 50 // лимит элементов на страницу
                    }
                }
            },
            update(data) {
                return data.users.users
            }
        }
    }

реализация пагинации:

pageNumber: 0,
            pageSize: 50,
            pageSizeChoices: [
                5, 10, 20, 50, 100
            ],

        usersCount() {
            return this.isMappingsLoading ? 0 : this.resolvedUsers.length
        },
        pageCount() {
            return Math.ceil(this.usersCount / this.pageSize)
        },
        paginatedData(){
            const start = this.pageNumber * this.pageSize
            const end = start + this.pageSize
            return this.filteredUsers.slice(start, end)
        },
        isPrevPageDisabled() {
            return this.pageNumber <= 1
        },
        isNextPageDisabled() {
            return this.pageNumber === this.pageCount
        },
        pageInfo() {
            return `${this.pageNumber + 1} of ${this.pageCount}`
        }
        prevPage() {
            this.pageNumber = Math.max(this.pageNumber - 1, 1)
        },
        nextPage() {
            this.pageNumber = Math.min(this.pageNumber + 1, this.pageCount)
        }

<div class="user-mgmt-info"
                     v-if="!isMappingsLoading && usersCount > 0">
                    <span>Rows per Page:</span>
                    <z-select
                        class="user-mgmt-info-rows"
                        v-model="pageSize"
                        :items="pageSizeChoices"
                    />
                    <v-icon
                        :disabled="isPrevPageDisabled"
                        @click="prevPage"
                        data-user-mgmt-prev-page
                    >
                        mdi-chevron-left
                    </v-icon>
                    <span class="user-mgmt-info-page-count">
                    {{ pageInfo }}
                </span>
                    <v-icon
                        :disabled="isNextPageDisabled"
                        @click="nextPage"
                        data-user-mgmt-next-page
                    >
                        mdi-chevron-right
                    </v-icon>
                </div>