pagination destructuring assignment value setting error - vue.js

Question

I'm trying to use the pagination feature. I wrapped a ref about the page with params =ref , paginated with params in axios and decomposed the structure to define totalCount. But I don't know where the problem lies with the Uncaught(promise) TypeError:Cannot set properties of undefined(setting 'value') error in the console. What part of the code needs to be modified?
boardlist.vue
<template>
<div>
<table class="box">
<tbody>
<tr
v-for="forms in form"
:key="forms.id"
style="cursor: pointer;"
#click="NoticeDetail(forms.id)">
<td class="td_title">
{{ forms.title }}
</td>
<td class="text_center">
{{ forms.company }}
</td>
<td class="text_center">
{{ forms.company_url }}
</td>
<td class="text_center">
{{ forms.location }}
</td>
<td class="text_right">
{{ forms.date_posted }}
</td>
</tr>
</tbody>
<AppPagination
:current-page="params._page"
:page-count="pageCount"
#page="page => (params._page = page)" />
</table>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import Sidebar from '~/components/Sidebar.vue'
import { ref,computed,watchEffect } from 'vue'
import axios from 'axios'
import AppPagination from '~/components/AppPagination.vue'
const router = useRouter()
const form = ref([])
const params = ref({
_page: 1,
_limit: 10,
})
const totalCount = ref(0)
const pageCount = computed(() =>
Math.ceil(totalCount.value / params.value._limit),
)
const username = sessionStorage.getItem('user')
const fetchPosts = async (params) =>{
console.log(params)
axios.get('http://127.0.0.1:8000/jobs/all', {
params: {
params
}
})
.then((res)=>{
console.log(res.data)
const { totalCount, noticeList } = res.data;
form.value = noticeList;
totalCount.value = totalCount;
})
}
watchEffect(fetchPosts)
const NoticeWrite = () => {
router.push({
path: '/service_center/notice/notice_create',
})
}
const NoticeDetail = id => {
console.log(id)
router.push({
name: 'noticedetail',
params: {
id
}
})
}
</script>
pagination.vue
<template>
<nav
class="mt-5"
aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li
class="page-item"
:class="isPrevPage">
<a
class="page-link"
href="#"
aria-label="Previous"
#click.prevent="$emit('page', currentPage - 1)">
<span aria-hidden="true">«</span>
</a>
</li>
<li
v-for="page in pageCount"
:key="page"
class="page-item"
:class="{ active: currentPage === page }">
<a
class="page-link"
href="#"
#click.prevent="$emit('page', page)">{{
page
}}</a>
</li>
<li
class="page-item"
:class="isNextPage">
<a
class="page-link"
href="#"
aria-label="Next"
#click.prevent="$emit('page', currentPage + 1)">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
currentPage: {
type: Number,
required: true,
},
pageCount: {
type: Number,
required: true,
},
})
defineEmits(['page'])
const isPrevPage = computed(() => ({ disabled: !(props.currentPage > 1) }))
const isNextPage = computed(() => ({
disabled: !(props.currentPage < props.pageCount),
}))
</script>
<style lang="scss" scoped></style>