Access to property object in Vue

Hi all i have in my controller alla user with role (one to one)

AuthController.php


    public function users()
    {
        $users = User::with('role')->get();
//        return $users[0]->role->role;
        return response()->json(['users' => $users], 200);
    }

I have such an answer:


{
    "users": [
        {
            "id": 1,
            "name": "Giovanni",
            "role_id": 1,
            "email": "[email protected]",
            "email_verified_at": null,
            "created_at": "2020-07-08T15:33:21.000000Z",
            "updated_at": "2020-07-08T15:33:21.000000Z",
            "role": {
                "id": 1,
                "role": "user",
                "created_at": null,
                "updated_at": null
            }
        },
        {
            "id": 2,
            "name": "Francesca",
            "role_id": 1,
            "email": "[email protected]",
            "email_verified_at": null,
            "created_at": "2020-07-13T13:58:11.000000Z",
            "updated_at": "2020-07-13T13:58:11.000000Z",
            "role": {
                "id": 1,
                "role": "user",
                "created_at": null,
                "updated_at": null
            }
        }
    ]
}

in My Admin LTE Template i have Profile.vue:



<div>
    <h1>Users</h1>
    <CCardBody>
        <CDataTable
            :items="users"
            :fields="fields"
            column-filter
            table-filter
            items-per-page-select
            :items-per-page="5"
            hover
            sorter
            pagination
        >
            <template #status="{item}">
                <td>
                    <CBadge :color="getBadge(item.status)">
                        {{item.status}}
                    </CBadge>
                </td>
            </template>

        </CDataTable>
    </CCardBody>
</div>


export default {
  name: 'Profiles',
  data(){
      return {
          users:[],
          fields:[
              {key: 'id'},
              {key: 'name'},
              {key: 'role'}
          ],
      }
  },
  mounted(){
      this.$http.get(process.env.VUE_APP_BK + 'users').then(res => {
          if(res.ok){
              this.users = res.body.users;
          }
      })
  }
}

How to access and show user[id].role.role for the name of role?

Please or to participate in this conversation.