Vuetify pagination not cycling through on button click - vue.js

Question

I am having trouble implementing Veutify's pagination component to cycle through my array.
<template>
<div class="grid grid-cols-4 gap-5">
<div v-for="(item, index) in pagedAssets" :key="`asset_index_${index}`">
{{ item }}
</div>
<v-pagination
v-model="pageNo"
:length="numPages"
></v-pagination>
</div>
</template>
<script setup>
let pageSize = 4;
let pageNo = 1;
let assets = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16"];
const numPages = computed(() => {
// calculate the number of pages we have
return Math.ceil(assets.length / pageSize);
});
const pagedAssets = computed(() => {
// get the start index for your paged result set.
// The page number starts at 1 so the active item in the pagination is displayed properly.
// However for our calculation the page number must start at (n-1)
const startIndex = (pageNo - 1) * pageSize;
// create a copy of your assets list so we don't modify the original data set
const data = [...assets];
// only return the data for the current page using splice
return data.splice(startIndex, pageSize);
});
</script>
I am expecting when cycling through that the items will update.

Answer 1

You need pageNo to be reactive, you can achieve that by making it a ref instead. You can read more about it here: https://vuejs.org/guide/essentials/reactivity-fundamentals.html
Here is a working example for your specific case: Playground

Answer 2

pageNo is a v-model variable so it should be reactive but you are using it as a static variable that's why it is not updating. you need to use ref to make it reactive.
Replace your script with this-
<script setup>
import { computed, ref } from "vue";
let pageSize = 4;
let pageNo = ref(1);
let assets = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16"];
const numPages = computed(() => {
// calculate the number of pages we have
return Math.ceil(assets.length / pageSize);
});
const pagedAssets = computed(() => {
// get the start index for your paged result set.
// The page number starts at 1 so the active item in the pagination is displayed properly.
// However for our calculation the page number must start at (n-1)
const startIndex = (pageNo.value - 1) * pageSize;
// create a copy of your assets list so we don't modify the original data set
const data = [...assets];
// only return the data for the current page using splice
return data.splice(startIndex, pageSize);
});
</script>