how to do menu item click in Vuetify?

I have created menu on avatar hover and also added item from item array. Now clicking on the items, have to go specific component or item. I tried this:

template:

 <template>
   <div>
       <v-menu offset-y open-on-hover>
              <template v-slot:activator="{ on }">
                 <v-avatar color="white" size="38"  v-on="on">
                    <span class="primary--text headline">A</span>
                 </v-avatar>
              </template>
              <v-list>
                <v-list-item
                  v-for="(item, index) in items"
                  :key="index"
                  @click="selectSection(item)" >

                  <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>

       </div>
 </template>

Script:

 <script>
   export default {
     data: () => ({
       items: [
         { title: 'abcd.xyz@example.com' },
         { title: 'Profile' },
         { title: 'Logout' },
         ],
      }),

     methods: {
      selectSection(item) {
       this.selectedSection = item;
      }  
    }
   </script> 

use switch-case in your items like this:

selectSection(item) {
      switch (item.title) {
        case 'abcd.xyz@example.com':
          console.log('email')
          break
        case 'Profile':
          console.log('Profile')
          break
        case 'Logout':
          console.log('Logout')
      }
    }

and instead of console.log()s use your code for example to go to profile page instead of console.log('Profile') put $router.push('/profile')

hope it helps you