<template>
    <li>
      <div @click="toggle">{{ item.label }}</div>
      <ul v-if="isOpen">
        <MenuItem v-for="child in item.children" :key="child.id" :item="child" />
      </ul>
    </li>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref } from 'vue';
  
  export default defineComponent({
    name: 'MenuItem',
    props: {
      item: {
        type: Object as () => { id: number; label: string; children?: any[] },
        required: true,
      },
    },
    setup() {
      const isOpen = ref(false);
      const toggle = () => {
        isOpen.value = !isOpen.value;
      };
      return { isOpen, toggle };
    },
  });
  </script>
  
  <style scoped>
  li {
    cursor: pointer;
  }
  </style>