Laravel vue cannot access to relation data - laravel

Question

I have customer data which has hasOne relationship with address table.
Returned data format is like below.
{
"customer_id": 1,
"last_name": "Cruickshank",
"first_name": "Pearl",
"phone": "[phone]",
"email": "kristofer.kautzer#example.org",
"order_id": null,
"address_id": 66,
"created_at": "2017-01-18 06:24:40",
"updated_at": "2017-01-18 06:24:40",
"deleted_at": null,
"address": {
"address_id": 1,
"address_code": "RS-03549-9811",
"address1": "14978 Effertz Turnpike Apt. 086",
"address2": null,
"city": "Susanaburgh",
"province": "Illinois",
"country": "PG",
"postal_code": "03549-9811",
"created_at": "2017-01-18 06:24:40",
"updated_at": "2017-01-18 06:24:40"
}
I got data using return $this->model->with(implode(',', $relation))->get();
However, I cannot access any of data in address object.
Vue Code
I throw city is undefined. However, I can access to address object data using chrome developer tool
<tr v-for="(customer, index) in customers">
<td>{{index + 1}}</td>
<td>{{getFullName(customer.first_name, customer.last_name)}}</td>
<td>{{customer.phone}}</td>
<td>{{customer.address.city}}</td>
</tr>
Am I doing something wrong? I tried customer['address']['city'] as well.
I can access city when I get data as you see below.
getCustomerList () {
axios.get('/api/customers')
.then((res)=>{
if(res.status === 200){
//I can access city here but not in vue for loop ...
console.log(res.data.customers[0].address.city)
this.customers = res.data.customers
}
})
},