In a table, the data is being displayed, but when I click on the page number provided by Laravel Vue Pagination, it is showing me the same page number 1. Well, the main problem is that the page number is not passed into the function (Composable API).

Template form

 
 
SN
 
Account Type
 
Name
 
Store name
 
Address
 
Contact number
 
Email
 
 
 
 
{{ i }}
 
{{ account.account_type }}
 
{{ account.name }}
 
{{ (account.shop_name)?account.shop_name: 'EMPTY'}}
 
{{ account.address }}
 
{{ account.contact_number }}
 
{{ account.email }}
 
 
 
  

The data from the Composable API is passed in:data, and the function (Composable) is also passed in @pagination-change-page.Script tag

import LaravelVuePagination from 'laravel-vue-pagination'; export default { components: { 'Pagination': LaravelVuePagination }, setup() { } const paginates = ref(10); const { accounts, loading, getAccounts } = accountDetails();//Composables API onMounted(() => { getAccounts({paginate:paginates}); }); return { accounts, loading, getAccounts }; }, };

Composable API In this function, I receive two parameters, and here is where Pagination (@pagination-change-page) should throw the page number!

import { ref } from '@vue/reactivity'; import axios from 'axios'; const accountDetails = () => { const accounts = ref({}); const loading = ref(true); const accountError = ref({}); const getAccounts = async ({page=1,paginate}) => { await axios.get('api/account/getAccounts?page=' page 'paginate=' paginate, { headers: { Authorization: `Bearer ${localStorage.getItem('token')}`, Accept: 'application/json', } }).then((res) => { accounts.value = res.data; loading.value = false; console.log(accounts.value); }).catch((resErr) => { loading.value = false; accountError.value = resErr; }) } return { accounts, loading, accountError, getAccounts } } export default accountDetails;