Vue - How to show a dropdown from appbar on icon click? - vue.js

Question

I have an appBar(mobile) with some icons on it. I want to show a dropdown when I click the notifications icon (as seen in many mobile apps) with the list of notifications. I am absolutely new to Vue.
<template>
<div>
<!-- <v-app-bar color="deep-purple accent-4" dense dark> -->
<v-menu>
<template v-slot:activator="{ on: activationEvents }">
<v-btn icon v-bind="attrs" v-on="activationEvents">
<div class="notification" #click="showNotif" v-bind="attrs" v-on="on">
<fas class="notif-icon" :icon="['far', 'bell']" />
<span class="count" v-if="notification.unreadCount != 0">{{
notification.unreadCount.toLocaleString()
}}</span>
</div>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="dessert in desserts"
:key="dessert"
#click="() => {}"
>
<v-list-item-title> {{ dessert.name }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<!-- </v-app-bar> -->
</div>
</template>
export default {
data() {
return {
toggleSelect: false,
desserts: [
{
name: "Frozen Yogurt",
calories: 159,
fat: 6.0,
},
{
name: "Ice cream sandwich",
calories: 237,
fat: 9.0,
},
{
name: "Eclair",
calories: 262,
fat: 16.0,
},
{
name: "Cupcake",
calories: 305,
fat: 3.7,
},
{
name: "Gingerbread",
calories: 356,
fat: 16.0,
},
{
name: "Jelly bean",
calories: 375,
fat: 0.0,
},
{
name: "Lollipop",
calories: 392,
fat: 0.2,
},
{
name: "Honeycomb",
calories: 408,
fat: 3.2,
},
{
name: "Donut",
calories: 452,
fat: 25.0,
},
{
name: "KitKat",
calories: 518,
fat: 26.015,
},
],
notification: { unreadCount: 0 },
};
},
Currently, there are 2 problems:
The list gets displayed directly without even clicking on the icon
The list gets displayed on/in the appbar (instead of getting displayed below the appbar)