Quasar Vue3 useCrud composeable (with Laravel Pagination)

useCrud.js

import { axios } from 'src/boot/axios'
import { ref, onMounted, watch } from 'vue'
import { useQuasar } from 'quasar'
import usePagination from './custom-pagination'

export default function useCrud ({ name, paginated = true, fetchWhenMounted = true }) {
  const currentPage = ref(1)
  const data = ref([])

  const { pagination, paginate } = usePagination(currentPage)

  const $q = useQuasar()

  onMounted(async () => {
    if (fetchWhenMounted)
      await fetch()
  })

  watch(pagination, async () => {
    await fetch()
  })

  const fetch = async (params, url = null) => {
    try {
      $q.loading.show({
        message: `Loading ${name}...`
      })

      if (paginated) {
        const readData = await paginate(url || `/${name}`, params)

        data.value = readData
      } else {
        const { data: readData } = await axios.get(url || `/${name}`, { params })

        data.value = readData
      }

      $q.loading.hide()
    } catch (err) {
      $q.notify({
        message: 'Oops, an error has occurred while trying to fetch the resource, please try again later!',
        type: 'negative'
      })
    }
  }

  const update = async (id, params, url = null) => {
    try {
      $q.loading.show()
      const { data } = await axios.put(url || `/${name}/${id}/update`, { ...params })
      $q.loading.hide()

      const index = data.value.findIndex(d => d.id === id)
      if (index) data.value[index] = data
    } catch (err) {
      $q.notify({
        message: 'Oops, an error has occurred while trying to update the resource, please try again later!',
        type: 'negative'
      })
    }
  }

  const destroy = async (id, url = null) => {
    try {
      if (confirm('Are you sure?')) {
        $q.loading.show()
        await axios.delete(url || `/${name}/${id}/delete`)
        $q.loading.hide()

        const index = data.value.findIndex(d => d.id === id)
        if (index) data.value.splice(index, 1)
      }
    } catch (err) {
      $q.notify({
        message: 'Oops, an error has occurred while trying to delete the resource, please try again later!',
        type: 'negative'
      })
    }
  }

  const store = async (params, url = null) => {
    try {
      const { data } = await axios.post(url || `/${name}/store`, { ...params })
      
      if (pagination.currentPage === pagination.lastPage && data.length === pagination.perPage) {
        window.location.reload()
      } else {
        data.value.push(data)
      }
    } catch (err) {
      $q.notify({
        message: 'Oops, an error has occurred while trying to store the resource, please try again later!',
        type: 'negative'
      })
    }
  }

  return {
    [name]: data,
    fetch,
    store,
    destroy,
    update,
    pagination,
    currentPage
  }
}