При рендере таблицы на Vue получаю ошибку "[Vue warn]: You may have an infinite update loop in a component render function"

У меня есть таблица с данными людей:

<tr v-for="person of displayedPersons()" :key="person.id">
    <td>{{ person.id }}</td>
    <td>{{ person.firstName }}</td>
    <td>{{ person.lastName }}</td>
    <td>{{ person.email }}</td>
    <td>{{ person.phone }}</td>
</tr>

props: ['tableType', 'smallTable', 'bigTable'],
data() {
    return {
        database: [],
        paginatedDb: []
    }
},
methods: {
    displayedPersons() {
        if (this.database.length == 0) {
            this.addDataInTable()
        }
        this.paginatePersons()
        return this.paginatedDb
    },
    addDataInTable() {
        if (this.tableType == 'small') {
            this.database = this.smallTable
        }
        else if (this.tableType == 'big') {
            this.database = this.bigTable
        }
    },
    paginatePersons() {
        let start = this.pageNumber * this.pageSize - this.pageSize
        let end = this.pageNumber * this.pageSize
        this.paginatedDb = this.database.slice(start, end)
    }
}

Данные берутся из метода, а не напрямую из массива, тк:

1. Данные большой и малой таблиц берутся из родительского компонента, и если присвоить их напрямую в массив data через mounted, то там будет пусто, тк данные в родителе берутся через fetch (можно это как-то обойти?)
2. В методе обрабатывается пользовательская пагинация, и отображается только нужная страница из таблицы

В итоге всё работает нормально, таблица рендерится как надо, но в консоли висит ошибка, указанная в названии. Как её пофиксить?