Table with Pagination

table.vue

<template>
  <!-- Table -->
  <div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-4 ring-1 ring-black ring-opacity-5 ">
      <table
          class="w-full text-sm text-left text-gray-500 dark:text-gray-400 table-auto min-w-full divide-y divide-gray-300 dark:divide-gray-700">
          <thead class="text-xs text-gray-600 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-300">
              <tr class="hover:bg-gray-50 dark:hover:bg-gray-600">
                  <th scope="col" class="p-4">
                      #
                  </th>
                  <th scope="col" class="px-6 py-3">
                      Data
                  </th>
              </tr>
          </thead>
          <tbody v-if="data && data.length > 0"
              class="bg-white border-b dark:bg-gray-800 dark:border-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
              <tr class="hover:bg-gray-50 text-xs dark:hover:bg-gray-600" v-for="user, index in users">
                  <td class="px-6 py-4 font-medium text-gray-600 whitespace-nowrap dark:text-gray-100">
                      {{ data.id }}
                  </td>
                  <td class="px-6 py-4">
                      {{ data.text }}
                  </td>
              </tr>
          </tbody>
          <tbody v-else class="bg-white border-b dark:bg-gray-800 dark:border-gray-800">
              <tr>
                  <td class="px-6 py-4 text-center" colspan="2">No data found...</td>
              </tr>
          </tbody>
      </table>
  </div>

  <Pagination ref="paged" :pagination="data.total" @refreshData="fetchData" />
</template>
<script setup>
import Pagination from '@/components/Pagination.vue'
import { useDataStore } from '@/stores/data'

const dataStore = useDataStore()
const paged = ref()

onMounted(() => {
    fetchData()
})

// fetch api is here
const fetchData = async (request = null) => {
    try {
        await dataStore.getAllData({
            page: request?.page ? request?.page : 1,
        })

        paged.value.setPage(request?.page ? request?.page : 1, false)
    } catch (e) {
        console.error(e)
    }
}

// data will automatically update
const data = computed(() => {
    return dataStore.dataLists
})
</script>