Vue 2 Laravel 5.3 Eloquent unable to retrieve data from object - eloquent

Question

Vue2 has been reading eloquent pretty well so far for me but except this point where I struggle to debug.
Shop-show.vue
<template>
.....
.....
<div class="row">
{{shop.user.id}}
</div>
.....
.....
</template>
<script>
export default{
mounted(){
this.getShop()
},
methods:{
getShop(){
var vm = this
vm.$http.get('/getShop/'+vm.shopId).then((response)=>{
vm.shop = response.data.data.shop
})
},
.....
.....
}
</script>
ShopController.php
.....
.....
public function getShop($id)
{
$shop = Shop::where('id',$id)->with('user')->firstOrFail();
$response = [
'data' => [
'shop' => $shop
]
];
return response()->json($response);
}
.....
.....
web.php
Route::get('/getShop/{id}', 'ShopController#getShop');
here when I render {{shop.user}} in my template it gives me perfectly fine object of user including info such as id and name, however when I do {{shop.user.id}} or {{shop.user.name}} it console log errors as followings
error#1
[Vue warn]: Error when rendering component at
/Applications/XAMPP/xamppfiles/htdocs/soyegg/resources/assets/js/components/Shop/Shop-show.vue:
error#2
Uncaught TypeError: Cannot read property 'id' of undefined
at Proxy.render (eval at (app.js:335), :46:47)
at VueComponent.Vue._render (eval at (app.js:444), :3096:22)
at VueComponent.eval (eval at (app.js:444), :2464:21)
at Watcher.get (eval at (app.js:444), :1663:27)
at new Watcher (eval at (app.js:444), :1655:12)
at VueComponent.Vue._mount (eval at (app.js:444), :2463:19)
at VueComponent.Vue$3.$mount (eval at (app.js:444), :6104:15)
at VueComponent.Vue$3.$mount (eval at (app.js:444), :8494:16)
at init (eval at (app.js:444), :2777:11)
at createComponent (eval at (app.js:444), :4120:9)
this has never happened before, very weird. Please help.

Answer 1

As you are loading vm.shop from getShop method, which is an async method, you will not have anything in vm.shop till it is populated, so initially you will get this error.
To prevent this error, you can put a null check before using it, with the help of v-if, like following:
<template>
.....
.....
<div class="row" v-if="shop && shop.user">
{{shop.user.id}}
</div>
.....
.....
</template>