Pagination vue 3

I have a local array with data which i pass to a table. I created variables: page,limit,totalPage and function changePage. In hook onMounted I calculate the number of pages based on the given limit. Through the v-for loop, displayed the pages and made them clickable on the function, but I don't understand how to set the limit of displayed table elements, and how to make pagination work.

<template>
  <div class="containerApp">
    <Dialog
      :showForm="showForm"
      @changeToggle="changeToggle"
      @hideDialog="hideDialog"
    >
      <PostForm @create="createPost" />
    </Dialog>
    <Select v-model="selectedSort" :options="sortOptions" />
  </div>

  <input type="text" v-model="searchQuery" />

  <Table :tableData="searchAndSort" />

  <div class="page_wrapper">
    <div
      v-for="(pageNumber, i) in totalPage"
      :key="i"
      @click="changePage(pageNumber)"
      class="page"
      :class="{ 'current-page': page === pageNumber }"
    >
      {{ pageNumber }}
    </div>
  </div>
</template>

<script>
import Table from "./components/Table.vue";
import Dialog from "./components/UI/Dialog.vue";
import PostForm from "./components/PostForm.vue";
import Select from "./components/UI/Select.vue";

import { ref } from "@vue/reactivity";
import { computed, onMounted } from "@vue/runtime-core";

export default {
  name: "App",
  components: {
    ...
  },
  setup() {
    const showForm = ref(false);
    const searchQuery = ref("");
    const tableData = ref([
    ...
    ]);
    const selectedSort = ref("");
    const sortOptions = ref([
    ...
    ]);

    const page = ref(1);
    const limit = ref(5);
    const totalPage = ref(0);

    onMounted(() => {
      totalPage.value = Math.ceil(tableData.value.length / limit.value);
    });

    const changePage = (pageNumber) => {
      page.value = pageNumber;
    };

    const createPost = (post) => {
      tableData.value.push(post);
      showForm.value = false;
    };
    const changeToggle = (toggle) => {
      showForm.value = !toggle;
    };
    const hideDialog = (val) => {
      showForm.value = val;
    };

    const sortedPosts = computed(() => {
    ...
    });

    const searchAndSort = computed(() => {
    ...
    });

    return {
      showForm,
      tableData,
      selectedSort,
      sortOptions,
      searchQuery,

      changeToggle,
      hideDialog,
      createPost,

      sortedPosts,
      searchAndSort,

      page,
      limit,
      totalPage,
      changePage,
    };
  },
};
</script>