Cannot expand or collapse v-list veutify - vue.js

Question

I am having issues with Vuetify v-list and v-list-group, I am trying to make a list and it does not expand nor collapse, I have tried to modify it myself and tried to copy and paste (from here https://next.vuetifyjs.com/en/components/lists/#sub-group, this also adding necessary props and models) but nothing. Not sure what I am doing wrong, I am not sure if it's the v-slot not working. I am using vite with vue 3 and vuetify 3.
<template>
<v-card class="mx-auto" width="300">
<v-list v-model:opened="open">
<v-list-item prepend-icon="mdi-home" title="Home"></v-list-item>
<v-list-group value="Users">
<template v-slot:activator>
<v-list-item prepend-icon="mdi-account-circle" title="Users"></v-list-item>
</template>
<v-list-group value="Admin">
<template v-slot:activator>
<v-list-item title="Admin"></v-list-item>
</template>
<v-list-item v-for="([title], i) in admins" :key="i" :title="title" :value="title"></v-list-item>
</v-list-group>
<v-list-group value="Actions">
<template v-slot:activator>
<v-list-item title="Actions"></v-list-item>
</template>
<v-list-item v-for="([title], i) in cruds" :key="i" :value="title" :title="title"></v-list-item>
</v-list-group>
</v-list-group>
</v-list>
</v-card>
</template>
<script lang="ts" setup>
import { createVuetify } from 'vuetify'
import { ref, computed } from 'vue'
import { useDisplay } from 'vuetify'
const open = ['Users'];
const admins = [
['Management', 'mdi-account-multiple-outline'],
['Settings', 'mdi-cog-outline'],
];
const cruds = [
['Create', 'mdi-plus-outline'],
['Read', 'mdi-file-outline'],
['Update', 'mdi-update'],
['Delete', 'mdi-delete'],
];
const links = ['Hi', 'Contacts', 'Settings', 'Hi', 'Contacts', 'Settings', 'Hi'];
const buttonLinks = ['Hi', 'Contacts', 'Settings', 'Hi', 'Contacts', 'Settings', 'Hi', 'Contacts', 'Settings', 'Hi', 'Contacts', 'Settings', 'Hi', 'Contacts', 'Settings', 'Hi', 'Contacts', 'Settings', 'Hi', 'Contacts', 'Settings', 'Hi', 'Contacts', 'Settings'];
const mini = true;
const items = [
{ title: 'Hello', icon: 'mdi-view-dashboard' },
{ title: 'About', icon: 'mdi-forum' },
];
</script>

Answer 1

Found the answer, and once again hopefully the Veutify team will post more appropriate examples of their library
<template>
<v-card class="mx-auto" width="300">
<v-list>
<v-list-item prepend-icon="mdi-home" title="Home"></v-list-item>
<v-list-group value="Users">
<template v-slot:activator="{ props }">
<v-list-item v-bind="props" prepend-icon="mdi-account-circle" title="Users"></v-list-item>
</template>
<v-list-group value="Admin">
<template v-slot:activator="{ props }">
<v-list-item v-bind="props" title="Admin"></v-list-item>
</template>
<v-list-item v-for="(title, i) in admins" :key="i" :title="title" :value="title">
</v-list-item>
</v-list-group>
<v-list-group value="Actions">
<template v-slot:activator="{ props }">
<v-list-item v-bind="props" title="Actions"></v-list-item>
</template>
<v-list-item v-for="(title, i) in cruds" :key="i" :value="title" :title="title">
</v-list-item>
</v-list-group>
</v-list-group>
</v-list>
</v-card>
</template>
Notice how I removed the <v-list v-model:opened="open"> from <v-list> that was the main problem, even if you don't pass in props and create a temporary array this will work and your list will collapse and expand