Пагинация в видимых элементах

Я создаю компонент разбивки на страницы, который отлично работает. Но я не знаю, как ограничить отображаемые элементы в цикле v-for и показать следующие элементы на следующей странице.

это компонент разбиения на страницы:

<template>
<div>
    <ul class = "pagination">
        <li class = "pagination-item">
            <button
                type = "button"
                @click = "onClickFirstPage"
                :disabled = "isInFirstPage"
            >
                First
            </button>
        </li>

        <li class = "pagination-item">
            <button
                type = "button"
                @click = "onClickPreviousPage"
                :disabled = "isInFirstPage"
            >
                Previous
            </button>
        </li>

        <li v-for = "page in pages" :key = "page.name" class = "pagination-item">
            <button @click = "onClickPage(page.name)" type = "button" :disabled = "page.isDisabled" :class = "{ active: isPageActive(page.name )}">
                {{ page.name }}
            </button>
        </li>

        <!-- Range of pages -->

        <li>
            <button
                type = "button"
                @click = "onClickNextPage"
                :disabled = "isInLastPage"
            >
                Next
            </button>
        </li>

        <li>
            <button
                type = "button"
                @click = "onClickLastPage"
                :disabled = "isInLastPage"
            >
                Last
            </button>
        </li>
    </ul>
</div>

<script>
export default {
    props: {
        maxVisibleButtons: {
            type: Number,
            required: false,
            default: 3
        },
        totalPages: {
            type: Number,
            required: true
        },
        total: {
            type: Number,
            required: true
        },
        currentPage: {
            type: Number,
            required: true
        }
    },
    computed: {
        startPage() {
            // When on the first page
            if (this.currentPage === 1) {
                return 1;
            }
            // When on the last page
            if (this.currentPage === this.totalPages) {
                return this.totalPages - this.maxVisibleButtons;
            }
            // When in between
            return this.currentPage - 1;
        },
        pages() {
            const range = [];
            for(let i = this.startPage; i <= Math.min(this.startPage + this.maxVisibleButtons - 1, this.totalPages); i+=1) {
                range.push({
                    name: i,
                    isDisabled: i === this.currentPage
                });
            }
            return range;
        },
        isInFirstPage() {
            return this.currentPage === 1;
        },
        isInLastPage() {
            return this.currentPage === this.totalPages;
        },
    },
    methods: {
        onClickFirstPage() {
            this.$emit("pagechanged", 1);
        },
        onClickPreviousPage() {
            this.$emit("pagechanged", this.currentPage - 1);
        },
        onClickPage(page) {
            this.$emit('pagechanged', page);
        },
        onClickNextPage() {
            this.$emit('pagechanged', this.currentPage + 1);
        },
        onClickLastPage() {
            this.$emit('pagechanged', this.totalPages);
        },
        isPageActive(page) {
            return this.currentPage === page;
        }
    }
}
</script>

<style scoped lang = "scss">
.pagination {
  list-style-type: none;
}

.pagination-item {
  display: inline-block;
}

.active {
  background-color: #4AAE9B;
  color: #ffffff;
}
</style>

мой v-for с предметами

<div
    v-for = "casino in orderBy(filteredCasinos, 'Rating', -1)"
    :key = "casino.id + '-filterd'"
    class = "casino-card"
    v-show = "filteredCasinos.length > 1"
  >

На данный момент разбиение на страницы работает, когда я нажимаю на следующую страницу, но, как я уже упоминал, отображаются все элементы, и я хочу ограничить их.