我正在尝试为一个名为 TableMagazines . 这是我的代码（主要受此启发）

<template>
    <div class="mb-4">
        <input class="float-end px-1" type="search" v-model="filter" placeholder="Search...">
    </div>

    <table class="table">
        <thead>
            <tr>
                <th class="col-md-7"><i class="bi bi-arrow-down-up float-end" @click="sort('title')"></i>Titolo</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="magazine in sortedMagazines" v-bind:key="magazine.id">
                <td>{{ magazine.title }}</td>
            </tr>
        </tbody>
    </table>

    <div class="row py-3">
        <div class="col-5">
            <v-pagination
                v-model="currentPage"
                :pages="pageCount"
                :range-size="1"
                active-color="#B1C3D7"
                @update:modelValue="loadPage"
                class = "float-end"
            />
        </div>
    </div>
</template>

<script>
import VPagination from "@hennge/vue3-pagination";
import "@hennge/vue3-pagination/dist/vue3-pagination.css";

export default {
    name: 'TableMagazines',
    components: {
        VPagination
    },

    props : [
        'magazines'
    ],

    data() {
        return {
            currentSort: 'title',
            currentSortDir: 'asc', 
            pageSize: 5, 
            currentPage: 1, 
            perPage: 5,
            filter:''
        }
    },

    methods: {

        sort:function(s) {
            if(s === this.currentSort) {
                this.currentSortDir = this.currentSortDir==='asc'?'desc':'asc';
            }
            this.currentSort = s;
        }, 

        loadPage: function(page) {
            this.currentPage = page;
        },

        showPerPage: function() {
            this.pageSize = this.perPage;
            this.currentPage = 1
        }
    }, 

    computed: {
        sortedMagazines: function() {
            let _magazines = this.magazines;
            if(this.filter !== '') {
                _magazines = _magazines.filter(
                    magazine => magazine.title.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0 );
            }
            return _magazines.sort((a,b) => {
                let modifier = 1;
                if(this.currentSortDir === 'desc') modifier = -1;
                if(a[this.currentSort] < b[this.currentSort]) return -1 * modifier;
                if(a[this.currentSort] > b[this.currentSort]) return 1 * modifier;
                return 0;
            }).filter((row, index) => {
                let start = (this.currentPage-1)*this.pageSize;
                let end = this.currentPage*this.pageSize;
                if(index >= start && index < end) return true;
            });

        }, 

        pageCount: function() {
            let _magazines = this.magazines;
            if(this.filter !== '') {
                _magazines = _magazines.filter(
                    magazine => magazine.title.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0 );
            }
            return Math.ceil(_magazines.length / this.pageSize)
        },

        filterCount: function() {

            let _magazines = this.magazines;
            if(this.filter !== '') {
                _magazines = _magazines.filter(
                    magazine => magazine.title.toLowerCase().indexOf(this.filter.toLowerCase()) >= 0 );
            }
            return _magazines.length
        }

    }, 

    watch: {
        filter() {
            this.currentPage = 1;
        }
    }
}
</script>

如果我在我的应用程序中使用此代码（而不是作为vue组件），它将非常有效。但如果我尝试将其作为一个组件，并通过

<table-magazines :magazines="magazines"></table-magazines>

我在分类方面有问题。我得到了错误
未捕获（承诺中）错误：超过最大递归更新数。这意味着您有一种React性效果，它会改变自身的依赖关系，从而递归地触发自身。可能的源包括组件模板、渲染函数、更新的钩子或监视源函数。
我相信这是由于一个无限循环。在阅读链接的评论时，我报告其他用户也有这个问题，但它没有得到解决（尽管提出了一些解决方案）。
如何使组件vue成为我的 TableMagazines ?