<template>
  <h1>{{ opened }}</h1>
  <v-treeview
    item-value="id"
    :items="items"
    return-object
    :value-comparator="compare"
    v-model:selected="selected"
    v-model:opened="opened"
  >
    <template #prepend="{ isOpen }"> [{{isOpen}}] </template>
    <template #append="{ isOpen }"> [{{isOpen}}] </template>
  </v-treeview>
</template>

<script setup>
  import { ref, watch } from 'vue'

  function compare(a, b) {
    console.log(a, b)
    return a.id === b.id
  }

  const selected = ref([])
  const opened = ref([])

  watch(selected, v => {
    console.log('selected', v)
  })

  const items = ref([
  {
    id: 1,
    title: 'Vuetify Human Resources',
    children: [
      {
        id: 2,
        title: 'Core team',
        children: [
          {
            id: 201,
            title: 'John',
          },
        ],
      },
    ],
  },
])
</script>