Get count of multiple nested items - vue.js

Question

I am displaying a Vuetify datatable and need to span some rows based on the count of nested data in the sample JSON below. The rowspan value should be a count of invoiceSections and invoiceItems.
I can get the count/length of invoiceSections but am having trouble with the count/length of invoiceItems.
[{
"vendorCode": "LOTMWI",
"vendorName": "LOVES TIRE CARE",
"orderId": "944803",
"invoiceSections": [{
"sectionDescription": "Lamps - Tail, Stop, Turn & License, Rear",
"repairReason": "INSPECTION",
"invoiceItems": [{
"partNumber": "",
"partDescription": "REPAIR LABOR",
"qtyReceived": 0,
},
{
"partNumber": "TL44032R",
"partDescription": "44032R S/T/T SUPER MODEL 44LED R",
"qtyReceived": 2,
},
{
"partNumber": "IMBRASS02",
"partDescription": "BRASS FITTINGS 02",
"qtyReceived": 1,
},
],
"id": 1,
}],
"id": 171,
}
]
A snipped of my code (trying to display the count to debug first):
<template v-slot:item="props">
<!-- <tbody> -->
<tr>
<td
:rowspan="rowspan"
valign="top"
class="pt-3 text-left font-weight-medium"
>{{ props.item.vendorCode }} {{ props.item.invoiceSections.length + 1}} - {{ props.item.invoiceSections.invoiceItems.length }}</td>
<td
:rowspan="rowspan"
valign="top"
class="pt-3 text-left font-weight-medium"
>{{ props.item.vendorName }}</td>
<td
:rowspan="rowspan"
valign="top"
class="pt-3 text-left font-weight-medium"
>{{ props.item.poNumber }}</td>
<td :rowspan="rowspan" valign="top" class="pt-3 text-left font-weight-medium">
<a
href="#"
data-tooltip="Click to view invoice"
data-tooltip-position="bottom"
target="_blank"
>{{ props.item.invoiceNumber }}</a>
</td>
<td
:rowspan="rowspan"
valign="top"
class="pt-3 text-left font-weight-medium"
>{{ props.item.invoiceDate | moment("M/D/YY") }}</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td
valign="top"
class="pt-3 text-right font-weight-medium nowrap"
>{{ props.item.invoiceAmount | currency }}</td>
<td :rowspan="rowspan" valign="top" class="pt-3 text-center">
<div v-if="props.item.approvalDate">
<v-icon color="green">mdi-check</v-icon>
</div>
<div v-else>
<v-btn #click="markApproved(props.item)" class="mx-2" fab small>
<v-icon color="grey lighten-2">mdi-check</v-icon>
</v-btn>
</div>
</td>
</tr>
<!-- SECTIONS -->
<template v-for="section in props.item.invoiceSections">
<tr class="darkTableRow" :key="section.id">
<td class="text-left" colspan="2">{{ section.sectionDescription }}</td>
<td class="text-left" colspan="3">{{ section.repairReason }}</td>
<td>$ 999</td>
<td>
<v-btn
outlined
small
color="primary"
dark
v-if="section.comments"
#click.stop="$set(dialogComments, section.id, true)"
>Comments</v-btn>
</td>
</tr>
<!-- ITEMS -->
<tr v-for="item in section.invoiceItems" :key="item.id">
<td class="text-left">{{ item.partNumber }}</td>
<td class="text-left">{{ item.partDescription }}</td>
<td class="text-right">{{ item.qtyReceived }}</td>
<td
class="text-right nowrap nopaddingRight"
:class="item.comparison"
>{{ item.each | currency }}</td>
<td class="text-left nowrap nopaddingLeft" :class="item.comparison">
<span
v-if="item.nationalAccount"
data-tooltip="National Account"
data-tooltip-position="right"
>N</span>
</td>
<td class="text-right nowrap">{{ item.secTotal | currency }}</td>
<td class="text-left">
<v-btn
outlined
small
color="primary"
dark
v-if="item.comments"
#click.stop="$set(dialogComments, item.id, true)"
>Comments</v-btn>
<v-dialog
v-model="dialogComments[item.id]"
scrollable
lazy
max-width="600"
:key="item.id"
>
<v-card>
<v-card-title class="headline grey lighten-2" primary-title>Comments</v-card-title>
<v-divider></v-divider>
<v-card-text v-html="item.comments" class="pt-4"></v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="green darken-1"
outlined
#click.stop="$set(dialogComments, item.id, false)"
>Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</td>
</tr>
</template>
<tr>
<td colspan="13" class="divider"> </td>
</tr>
<!-- </tbody> -->
</template>