Display data from an Api in a V-data-table, an object within a Vue js object, vuetify

I have the following Json coming from an api, which I want to present in a V-DATA-TABLE:

[
    {
        "id": 1,
        "firstName": "Ana",
        "lastName": "Lucia",
        "phone": "(11)99989-8989",
        "mobilePhone": "(11)99989-8989",
        "email": "[email protected]",
        "gender": {
            "name": "feminino"
        },
        "status": {
            "name": "inativo"
        },
        "services": [
            {
                "name": "progressiva"
            },
            {
                "name": "Manicure"
            }
        ]
    },
    {
        "id": 2,
        "firstName": "Maria",
        "lastName": "Luiza",
        "phone": "(12)32333-3333",
        "mobilePhone": "(43)45555-5555",
        "email": "[email protected]",
        "gender": {
            "name": "feminino"
        },
        "status": {
            "name": "pendente"
        },
        "services": [
            {
                "name": "progressiva"
            }
        ]
    },
    {
        "id": 3,
        "firstName": "Mario",
        "lastName": "Braz",
        "phone": "(11)23232-3222",
        "mobilePhone": "(11)23232-3222",
        "email": "[email protected]",
        "gender": {
            "name": "masculino"
        },
        "status": {
            "name": "ativo"
        },
        "services": [
            {
                "name": "progressiva"
            }
        ]
    }
]

But in the Data table the field that would come the services, is coming empty as picture:

Follows the date code of mine .View:

data: () => ({
      dialog: false,
      pageTitle: 'Employees',
      headers: [
        {
          text: 'First Name',
          align: 'start',
          sortable: false,
          value: 'firstName',
        },
        { text: 'Last Name', value: 'lastName' },
        { text: 'Email', value: 'email' },
        { text: 'Phone', value: 'phone' },
        { text: 'Mobile Phone', value: 'mobilePhone' },
        { text: 'Gender', value: 'gender.name' },
        { text: 'Status', value: 'status.name' },
        { text: 'Services', value: 'services.name' },
        { text: 'Actions', value: 'action', sortable: false },
      ],
      search: '',
      employees: [],
      genders: [],
      status: [],
      services:[],
      editedIndex: -1,
      editedItem: {},
      defaultItem: {},
    }),

I noticed that when I change this snippet of code and leave only 'services':

{ text: 'Services', value: 'services' },

Appears exactly the amount of objects that are the services but not the names:

Then I suppose the error is occurring in this part, could anyone help me?

* * Updated * *

Follows method I used to pull the main object which is 'employees' and all their relationships:

methods: {
      initialize () {
        axios.get('http://192.168.26.130:3000/employees/').then(response => {
          this.employees = response.data
          console.log(response)
        }).catch(e => {
          console.log(e)
        });
        axios.get('http://192.168.26.130:3000/genders/').then(response => {
          this.genders = response.data
          console.log(response)
        }).catch(e => {
          console.log(e)
        });
        axios.get('http://192.168.26.130:3000/employee-status').then(response => {
          this.status = response.data
          console.log(response)
        }).catch(e => {
          console.log(e)
        });
        axios.get('http://192.168.26.130:3000/services').then(response => {
          this.services = response.data
          console.log(response)
        }).catch(e => {
          console.log(e)
        });

      },