Usage in your view:

<v-select-remote v-if="
  column.filterOptions &&
  column.filterOptions.customFilter &&
  column.field === 'roleName'
" v-model="selectedRole" label="roleName" :remote="roleService.getListRoles" placeholder="Filter by Role"
  filterKey="roleName"
  @update:modelValue="() => {
    updateFilters(column, selectedRole?.id || null);
  }" />

in your script:
const selectedRole = ref<any>(null)

in service axios:

async getListRoles(params: Record<string, any>): Promise<any> {
    const _api = this.api || api.create('Role')
    try {
      const response = await _api.get('/role', { params })
      return response.data
    } catch (error: any) {
      console.error('Failed to fetch users:', error)
      if (error.response) {
        console.error('Server responded with:', error.response.data)
      }
      throw new Error(error.message) // Re-throw the error to handle it in the caller
    }
  }

in your return api must like this format:

async findRoleAll(
....
// your query db:
....
return {
      page, // page 1,2,3,4,etc
      count, // count is total found items.length
      items,  // data query filtered and limited per page count 
      total, // total all data without limit.
    };