[Vuejs]-There are no data returning on the table Vue component

Controller

public function getRoleForDataTable() { 
     $roles = Role::all(); 
     return response(new RoleResource($roles)); }

RoleResource.php

public function toArray($request) {
    $itemList = [];

    foreach ($this->collection as $item) {

        array_push($itemList, [
            'id' => $item->id,
            'name' => $item->name,
            'description' => $item->description,
            'created_at'=>Carbon::parse($item->created_at)->toDateTimeString()
        ]);
    }
    return $itemList;
}

Vue File

<table class="table">
            <thead>
            <tr>

                <th scope="col">Serial</th>
                <th scope="col">Display Name</th>
                <th scope="col">Description</th>
                <th scope="col">Created At</th>
            </tr>
            </thead>
            <tbody>
            <tr class="" v-if="tableData.length === 0">
                <td class="lead text-center" :colspan="columns.length + 1">No data found.</td>
            </tr>
            <tr v-for="(data, key1) in tableData" :key="data.id" class="m-datatable__row" v-else>
                <td>{{ serialNumber(key1) }}</td>
                <td>{{ data.name }}</td>
                <td>{{ data.description }}</td>
                <td>{{ data.created_at }}</td>
            </tr>
            </tbody>
        </table>