VueJS- Display multiple nested properties in objects - vue.js

Question

I have a multi-level navigation component in VueJS. I can retrieve and display the first 2 levels but I also need the nested property called name of the children array to be displayed. How can I get this nested property to print out in my for loop?
Here is my code:
<template>
<div class="navigation__main-menu-wrapper">
<ul>
<li
v-for="(item, index) in navItems"
:key="index">
<div class="navigation__main-menu-list-link">
<a class="mainnav-anchor"
:href="item.url">{{ item.name }}</a>
</div>
<ul
class="navigation__submenu">
<li
v-for="(subItem, index) in item.items"
:key="index">
<a
:href="subItem.url"
:title="subItem.name">
<div>
<span>{{subItem.name}}</span>
</div>
<div
v-for="(subItemChild, index) in items.children"
:key="index">
<span class="navigation__submenu-name">{{subItemChild.name}}</span>
</div>
</a>
</li>
</ul>
</li>
</ul>
</div>
</template>
<script>
export default {
data: function () {
return {
navItems: []
};
},
mounted: function () {
this.onLoadMainNavigation();
},
methods: {
onLoadMainNavigation: function () {
this.$helpers
.getApiCall("/api/", {
type: "mainnavigation",
})
.then((response) => {
const items = [];
Object.values(response.data.data).forEach((item) => {
const subItems = [];
//Check if there is a submenu
if (item.subMainNavigation) {
item.subMainNavigation.forEach((subItem, subItemChild) => {
subItems.push({
name: subItem.name,
class: subItem.class,
children: [{
name: subItemChild.name
}]
});
});
}
items.push({
name: item.name,
url: item.url,
items: subItems
});
});
this.navItems = items;
})
}
}
};
</script>
This is an exmplae of the data that is outputted
[
{
"name":"Charging solutions"
"items":[
{
"name":"By industry",
"class":"by-industry",
"children":[
{
"id":6671,
"name":"Workplaces",
"class":"workplaces"
},
{
"id":6672,
"name":"Retail & hospitality",
"class":"retail"
},
{
"id":6673,
"name":"Commercial parking",
"class":"parking"
},
{
"id":6674,
"name":"Fuel retailers",
"class":"fuel"
},
]
},
{
"name":"Products",
"class":"products",
"children":[
{
"id":204,
"name":"Public chargers",
"class":"public"
},
{
"id":206,
"name":"Accessories",
"class":"accessories"
},
{
"id":4889,
"name":"Smart charging",
"class":"smart"
}
]
}
]
}
]

Answer 1

Just replace items.children by subItem.children in the last nested loop :
<div v-for="(subItemChild, _index) in subItem.children" :key="_index">
<span class="navigation__submenu-name">{{subItemChild.name}}</span>
</div>

Answer 2

I eventually solved this by simply doing
subItems.push(subItem);