v-list close group when list-item is clicked - vue.js

Question

I've this v-navigation drawer in my project. It contains both v-list-items and a v-list-group. When clicking an v-list-item, and the v-list-group is expanded, I want the group to be collapsed. How can this be done?
<v-app id="t">
<v-navigation-drawer dark v-model="sidebar" app>
<v-list>
<v-list-item router-link to='/Test'>
<v-list-item-title>Test</v-list-item-title>
</v-list-item>
<v-list-item router-link to='/Test2'>
<v-list-item-title>Test2</v-list-item-title>
</v-list-item>
<v-list-group :value="true">
<template v-slot:activator>
<v-list-item-title>Title</v-list-item-title>
</template>
<v-list-item
v-for="item in mobAdminItems"
:key="item.title"
:to="item.linkTo"
>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
<v-list-item router-link to='/Test3'>
<v-list-item-title>Test3</v-list-item-title>
</v-list-item>
<v-list-item router-link to='/Test4'>
<v-list-item-title>Test4</v-list-item-title>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-app>

Answer 1

You can just add v-model into v-list-group component and assign it to some variable. Changing this variable will lead to expand / collapse actions.
<v-list-group v-model="groupOpened">
<template v-slot:activator>
<v-list-item-title>Title</v-list-item-title>
</template>
<v-list-item
v-for="item in mobAdminItems"
...
#click="groupOpened = false"
>
<v-list-item-content>
<v-list-item-title v-text="item.title"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-group>
...
data () {
return {
...
groupOpened: false,
}
}
Test this at CodePen.