Vue js 3 map() is not a function using laravel pagination

I am using map() function to return an array for my data and display they in a dynamically way for my table in vue js. I get an error when i use paginate method : map() is not a function.
Here is the vue table with function

<thead class="">
  <th><input type="checkbox" class="form-check-input" v-model="selectAll" title="Select All"></th>
  <th v-for="(header, index) in visibleHeaders" :key="index" scope="col">
     {{ header }}
 <tr v-show="leads.length" v-for="(column, index) in visibileColumn" :key="index">
   <input type="checkbox" class="form-check-input" v-model="selected" :value="" />
  <td v-for="atr in column">{{atr}}</td>
   <a class="btn btn-sm btn-info">View</a>
   <button type="button" class="btn  btn-sm btn-secondary"  data-mdb-toggle="modal" data-mdb-target="#editUserModal" >Edit</button>
   <button type="button" class="btn  btn-sm btn-danger" >Delete</button>
<tr v-show="!leads.length">
  <td colspan="12" class="text-center">Sorry :( No data found.</td>

data() {
        return {
            headers: [],
            leads: [],
            field: '',

computed: {
        visibleHeaders() {
            return => {
                return h.Field.replace("_", " ").toUpperCase()
        visibileColumn() {
            return => {
                // console.log(c)
                return c

methods: {
   getData() {
            .then(response => {
                this.leads =
                this.headers =
                // console.log(

And laravel controller function

public function getleads(Request $request)
        $table_name = 'leads';
        // Through raw query
        $query = "SHOW COLUMNS FROM $table_name";
        $data = DB::select($query);

        if ($request->ajax()) {
            return response()->json([
                'leads' => Lead::paginate(10),
                'headers' => $data
            ], Response::HTTP_OK);

if i use 'leads' => Lead::get(), this method works fine but when i use paginate(10) i get an error

app.js:34778 [Vue warn]: Error in render: "TypeError: is not a function"

>Solution :

the paginate method returns an object with data field and other fields explained here, so you should do :

this.leads =

Leave a Reply