Vue stop list/expansion - vuejs2

Question

I would like to stop a list from collapsing if I click on the expanded element. So if I click on any collapsed header it should expand, but if I click on the same header it shouldn't collapse but remain active/expanded (clicking on some other collapsed header will work and the previous will collapse). I've tried fiddling with v-model, :value, and stopPropagation() without any luck. Here is a codepen where the active prop is correct but the elements still collapse when active.
new Vue({
el: '#app',
data () {
return {
disableNavbar: true,
items: [
{
action: 'local_activity',
title: 'Attractions',
items: [
{ title: 'List Item' }
]
},
{
action: 'restaurant',
title: 'Dining',
active: true,
items: [
{ title: 'Breakfast & brunch' },
{ title: 'New American' },
{ title: 'Sushi' }
]
},
{
action: 'school',
title: 'Education',
items: [
{ title: 'List Item' }
]
},
{
action: 'directions_run',
title: 'Family',
items: [
{ title: 'List Item' }
]
},
{
action: 'healing',
title: 'Health',
items: [
{ title: 'List Item' }
]
},
{
action: 'content_cut',
title: 'Office',
items: [
{ title: 'List Item' }
]
},
{
action: 'local_offer',
title: 'Promotions',
items: [
{ title: 'List Item' }
]
}
]
}
},
methods: {
test(i,e) {
console.log('clicked'+i+' '+JSON.stringify(e));
if(this.items[i].hasOwnProperty('active')){
console.log(this.items[i].active.toString());
}
this.items.forEach((obj,ind)=>{
if(ind!==i){
obj.active=false;
}
})
console.log(JSON.stringify(this.items));
if(this.items[i].hasOwnProperty('active') && this.items[i].active){
event.stopPropagation();
e.stopPropagation();
}
this.items[i].active=true;
}
}
})
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-list readonly>
<v-list-group
v-for="(item, i) in items"
:key="item.title"
:value="item.active"
:prepend-icon="item.action"
no-action
#click.prevent="test(i,$event)"
>
<template v-slot:activator>
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</template>
<v-list-tile
v-for="subItem in item.items"
:key="subItem.title"
#click=""
>
<v-list-tile-content>
<v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-icon>{{ subItem.action }}</v-icon>
</v-list-tile-action>
</v-list-tile>
</v-list-group>
</v-list>
</v-card>
</v-flex>
</v-layout>

Answer 1

Simple solution: #click.native.stop="yourAction".