Pagination in primevue dataview doesn't work

PrimeVue paginator somehow doesn't work with test data. I installed primevue

yarn add primevue@^3.12.6 --save

imported everything. All components work perfectly, but things like pagination, lazy loading doesn't. Everything loads up, if i change the data, the view changes aswell. However if I try to make pagination (setting rows to 1, and then there are 2 pages) it doesnt change the content. Same with filter, nothing happens. Here are my files

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        {{--    PrimeFlex     --}}
        <link href="https://unpkg.com/primevue@^3/resources/themes/saga-green/theme.css" rel="stylesheet" />
        <link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
        <link href="https://unpkg.com/primeflex@^3/primeflex.min.css" rel="stylesheet" />
        <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />

        {{--    BoxIcons     --}}
        <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>
    </head>
    <body class="antialiased">
        <div id="app">
            <app></app>
        </div>

        <script src="{{ asset('js/main.js') }}"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    </body>
</html>

main.js

require('./bootstrap');

import { createApp } from 'vue'

import App from './App'
import router from './routerList'
import store from '../store/store'
import PrimeVue from 'primevue/config'

const app = createApp(App)
app.use(router)
app.use(store)
app.use(PrimeVue)

app.mount('#app')

App.vue

<template>
    <AppSiteNavbar/>
    <router-view></router-view>
</template>

<script>

import AppSiteNavbar from '../components/AppSiteNavbar'

export default {
    name: 'App',
    components: { AppSiteNavbar },
}
</script>

<style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: 'Montserrat', 'sans-serif';
    }
</style>

SiteMenuList.vue

<template>
    <DataView :value="items" layout="grid" :paginator="true" :lazy="true" :rows="12">
        <template #header>
            <div class="flex justify-content-between">
                <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"/>
                <span class="p-input-icon-left">
                    <i class="pi pi-search" />
                    <InputText v-model="filters1['global'].value" placeholder="Keyword Search" />
                </span>
            </div>
        </template>

        <template #grid="slotProps">
            <div class="col-12 md:col-6 xl:col-3">
                <SiteMenuListItem :item="slotProps.data" />
            </div>
        </template>
    </DataView>
</template>

<script>
import SiteMenuListItem from './SiteMenuListItem'


import { FilterMatchMode, FilterOperator } from 'primevue/api';
import DataView from 'primevue/dataview'
import Dropdown from 'primevue/dropdown'
import Button from 'primevue/button'
import InputText from 'primevue/inputtext'

export default {
    name: 'SiteMenuList',
    components: {
        SiteMenuListItem,
        DataView,
        Dropdown,
        Button,
        InputText,
    },
    created() {
        this.initFilters1()
    },
    data() {
        return {
            items: [
                {
                    'name': 'Test1',
                    'description': 'desc-test-1',
                    'image': '/assets/images/main_background.jpg',
                    'price': 23311,
                    'category': 'test1',
                },
                {
                    'name': 'Test2',
                    'description': 'desc-test-2',
                    'image': '/assets/images/pizza.jpg',
                    'price': 321,
                    'category': 'test2',
                },
            ],
            filters1: null,
        }
    },
    methods: {
        clearFilter1() {
            this.initFilters1();
        },
        initFilters1() {
            this.filters1 = {
                'global': {value: null, matchMode: FilterMatchMode.CONTAINS},
            }
        }
    }
}
</script>

<style scoped>

</style>

SiteMenuListItem.vue

<template>
    <Card class="m-3">
        <template #header>
            <img :alt="item.category" :src="item.image" />
        </template>

        <template #title>
            <div v-text="item.name" class="text-center text-3xl" />
        </template>

        <template #subtitle>
            <div v-text="item.description" class="text-center text-2xl" />
        </template>

        <template #content>
            <div class="font-bold text-4xl text-center">
                {{ item.price }} Ft
            </div>
        </template>

        <template #footer>
            <div class="flex justify-content-center">
                <Button label="Kosárba" class="p-button-rounded"/>
            </div>
        </template>
    </Card>
</template>

<script>
import Card from 'primevue/card'
import Button from 'primevue/button'

export default {
    name: 'SiteMenuListItem',
    props: {
        item: {
            type: Object,
            required: true,
        }
    },
    components: {
        Card,
        Button,
    }
}
</script>

<style scoped>
    img {
        object-fit: cover;
        height: min(40vw, 20rem);
    }
</style>