Laravel & vue axios get method returns Getters & Setters?

I am new in Vue.js and trying to use axios to fetch data from Laravel API. The function in backend returns an array of arrays as:

public function getPersonTypes()
{
    $data = [];
    $personTypes = config('codeechoo.documentation.config.personTypes');
    foreach ($personTypes as $id => $type) {
        $data[] = [
            'id' => $id,
            'name' => trans($type)
        ];
    }

    return response()->json($data);
}

And the Vue function in methods is:

fetchPersonTypes() {
           axios.get(route('api.documentation.person.types'))
                .then((response) => {
                    console.log(response.data);
                    this.personTypes = response.data;
                });
        }

But the console show the result as an array of objects like:

id: Getter & Setter
name: Getter & Setter

So how can I get the real values of id, name props ?

via Chebli Mohamed