Vuejs3 Pagination Причины неработающей ошибки

Я пытаюсь использовать функцию разбиения на страницы. ограничение до 10 страниц _limit с parmas=ref Я пробовал разбиение на страницы от axios до params, указав первую страницу как 1, но номер не отображается. Ошибок в консоли нет, есть только кнопки "Далее" и "Предыдущий". Ошибок нет, поэтому не знаю в чем проблема. Какую часть моего кода мне нужно изменить?

разбиение на страницы.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">&laquo;</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">&raquo;</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>

список досок.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.info(params)
  axios.get('http://127.0.0.1:8000/jobs/all', {
    params: {
      params
    }
  })
.then((res)=>{
  console.info(res.data)
  form.value = res.data
  
})
}
watchEffect(fetchPosts)
const NoticeWrite = () => {
  router.push({
    path: '/service_center/notice/notice_create',
  }) 
}

const NoticeDetail = id => {
  console.info(id)
  router.push({
    name: 'noticedetail',
    params: {
      id
    }
  }) 
}
</script>