Content isn't displayed unless commented and then uncommented - vue.js

Question

I am working with an expansion panel that makes an API call when clicked, populating the v-card and v-layout with the response data. The challenge I am facing is that initially, the v-layout isn't populated.
If I comment out the v-flex elements, the v-layout will generate and display the expected number of rows (that are now empty and blank). Then, I uncomment the v-flex which displays the data properly within the v-layout.
Below is the template code I am using, alongside the API call that is being used when the v-expansion-panel-content is clicked:
<v-expansion-panel expand>
<v-expansion-panel-content v-for="(device, index) in devices" :key="index">
<div slot="header" #click="requestDeviceBreadcrumbs(device.id);">
<v-card flat>
<v-layout row wrap class="pa-3 project" :class="inAlarm(device)">
<v-flex xs12 md6>
<div class="caption grey--text">Location</div>
<div>{{ device.location }}</div>
</v-flex>
<v-flex xs6 sm4 md2>
<div class="caption grey--text">Address</div>
<div>{{ device.ip_address }}:{{ device.http_port_number }}</div>
</v-flex>
<v-flex xs6 sm4 md2>
<div class="caption grey--text">Manufacturer</div>
<div>{{ device.manufacturer }}</div>
</v-flex>
<v-flex xs2 sm4 md2>
<div class="right">
<v-chip small class="white--text caption my-2" :class="inAlarm(device)">
{{ device.alarm_count }}
</v-chip>
</div>
</v-flex>
</v-layout>
</v-card>
</div>
<v-card flat>
<v-layout row wrap class="pa-3 project" v-for="(breadcrumb, index) in device.breadcrumbs" :key="index" >
<v-flex xs12 md6>
<div class="caption grey--text">Oid</div>
<div>{{ breadcrumb.oid }}</div>
</v-flex>
<v-flex xs6 sm4 md3>
<div class="caption grey--text">Value</div>
<div>{{ breadcrumb.value }}</div>
</v-flex>
<v-flex xs6 sm4 md3>
<div class="caption grey--text">Timestamp</div>
<div>{{ breadcrumb.timestamp }}</div>
</v-flex>
</v-layout>
<v-divider></v-divider>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
And my API request function:
requestDeviceBreadcrumbs: function(device_id) {
axios({
method: "get",
url: `http://127.0.0.1:8000/api/v1/breadcrumbs/?device=${device_id}`
}).then(response => {
this.devices.find(obj => obj.id === device_id).breadcrumbs =
response.data;
});
}
My concern is that it's taking too long for the API to respond, is this the case? If so, what is acceptable way of handling this scenario?
Thank you.

Answer 1

Use Vue.set to add/update a reactive property to one device:
requestDeviceBreadcrumbs: function(device_id) {
axios({
method: "get",
url: `http://127.0.0.1:8000/api/v1/breadcrumbs/?device=${device_id}`
}).then(response => {
let device = this.devices.find(obj => obj.id === device_id)
this.$set(device, 'breacrumbs', response.data)
});
}