Bootstrap Vue b-table displaying nested object - vue.js

Question

I'm trying to list the drivers in b-table.
This gives me the correct name of the driver:
console.log(this.orders[0].order_drivers[0].populated_driver.user.username)
But when I want to display it on the table, it gives "data.item.order_drivers[0] is not defined" error.
Here's my code:
<b-table :items="orders"
:fields="fields"
:per-page="perPage"
:current-page="currentPage"
:filter="filter"
:filter-function="filterDate"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
sort-icon-left
small
>
<template #cell(status)="data">
<div class="text-nowrap">
<span class="align-text-top text-capitalize">{{ data.item.status }}</span>
</div>
</template>
<template #cell(order_number)="data">
<div class="text-nowrap">
<span class="align-text-top text-capitalize">{{ data.item.order_number}}</span>
</div>
</template>
<template #cell(deliver_date)="data">
<span class="align-text-top text-capitalize">{{ data.item.deliver_date }}</span>
</template>
<template #cell(pickup_date)="data">
<span class="align-text-top text-capitalize">{{ data.item.pickup_date }}</span>
</template>
<template #cell(subtotal)="data">
<div class="text-nowrap">
<span class="align-text-top text-capitalize">{{ data.item.subtotal }}</span>
</div>
</template>
<template #cell(tip)="data">
<div class="text-nowrap">
<span class="align-text-top text-capitalize">{{ data.item.tip_from_restaurant }}</span>
</div>
</template>
<template #cell(additional_tip)="data">
<div class="text-nowrap">
<span class="align-text-top text-capitalize">{{ data.item.extra_tip_from_restaurant }}</span>
</div>
</template>
<template #cell(tfr_tip)="data">
<div class="text-nowrap">
<span class="align-text-top text-capitalize">{{ data.item.tip_from_tfr }}</span>
</div>
</template>
<template #cell(tfr_additional_tip)="data">
<div class="text-nowrap">
<span class="align-text-top text-capitalize">{{ data.item.extra_tip_from_tfr }}</span>
</div>
</template>
<template #cell(driver)="data">
<div class="text-nowrap">
<span class="align-text-top text-capitalize">{{ data.item.order_drivers[0].populated_driver.user.username}}</span>
</div>
</template>
</b-table>
And this is what axios returns:
Response
UPDATE:
I've added v-if and v-else as suggested and worked for me!
<div class="text-nowrap">
<span class="align-text-top text-capitalize" v-if="orders[data.index].order_drivers.length!==0" >{{ data.item.order_drivers[0].populated_driver.user.username}}</span>
<span class="align-text-top text-capitalize" v-else>None.</span>
</div>