Vue how to keep open all index used to make treeview - vue.js

Question

I made a component like treeview to show data like this:
[how my treeview shows][1]
<ul v-for="(build, index) in buildingList" :key="index">
<v-list-item>
<v-list-item-icon>
<v-icon v-show="build.apartments.length || build.guilds.length"
#click="showSub(index)">
{{ showAll ? ' mdi-chevron-up' : ' mdi-chevron-down' }}
</v-icon>
</v-list-item-icon>
</v-list-item>
<v-list-item-group v-show="currentIndex === index">
<li v-for="(apart) in build.apartments"
:key="apart.folderEid"
#load="getApartCode(apart.renewalCode)">
<v-list-item>
{{apart.title}}
</v-list-item>
</li>
<li v-for="(guild) in build.guilds"
:key="guild.folderEid">
<v-list-item>
{{guild.title}}
</v-list-item>
</li>
</v-list-item-group>
</ul>
when I want to open one of the list group items, I said get the index and open it. but now, I wanna make it show all the indexes when I open the page. the codes in data and methods:
data => currentIndex: -1,showAll: false,
in Methods:
methods: {
showSub(index) {
this.showAll = !this.showAll
this.currentIndex = this.currentIndex === index ? -1 : index
console.log(index, this.currentIndex)
},
async propertyTreeGet() {
this.loading = true
// this.showAll = true
// if ()
await this.$store.dispatch("axiosGet", {
url: `folder/api/properties/tree/${this.id}`
}).then(response => {
this.propertyList = response.data.data
this.loading = false
this.propertyTree.push(response.data.data)
this.propertyList.buildings.filter(build => {
this.buildingList.push(build)
return build.renewalCode = this.buildRenewal
})
this.getData()
})
},
}
I couldn't use the Vuetify treeview because in API we didn't have children but arrays of building, apartment, and guid inside the main array. Can anyone please give me a hint or a simpler example?
[1]: https://i.stack.imgur.com/0MmzE.png