app_vue2/components/Layout/HeaderMenu.vue

<template>
  <v-menu offset-y left max-height="300">
    <template v-slot:activator="{ on, attrs }">
      <v-avatar v-if="avatar"
             size="30"
             v-bind="attrs"
             v-on="on"
      >
        <img
          src="https://cdn.vuetifyjs.com/images/john.jpg"
          alt="John"
        >
      </v-avatar>
      <v-btn v-else
             icon
             v-bind="attrs"
             v-on="on"
             color=""
      >
        <v-icon class="ot_white--text" small>{{menu.icon}}</v-icon>
      </v-btn>
    </template>
    <v-list dense :subheader="true">
      <v-list-item dense class="ot_light_grey">
        <v-list-item-title v-text="$t(menu.title)"></v-list-item-title>
      </v-list-item>
      <template v-for="(item, index) in menu.children">
        <v-list-item
          :key="item.title"
          :href="item.isExternalLink ? item.to : undefined"
          :to="!item.isExternalLink ? item.to : undefined"
          router
          exact
        >
          <v-list-item-title v-text="$t(item.title)"></v-list-item-title>
        </v-list-item>
        <v-divider
          v-if="index < menu.length - 1"
          :key="index"
        ></v-divider>
      </template>

    </v-list>
  </v-menu>
</template>

<script lang="ts">
  import {defineComponent} from '@nuxtjs/composition-api'

  export default defineComponent({
    props: {
      menu: {
        type: Object,
        required: true
      },
      avatar: {
        type: Boolean,
        required: false
      }
    }
  })
</script>