Open a dropdown with right click in Vue3 and Vuetify3 - vue.js

Question

I am trying to work on the context menu for Vue3. I want to show the list of items under the v-menu by right-clicking on a dropdown button. I am working on this link as a reference but when I tried to do the same in my Vue3 file, It gives me an error like this-
Can anyone suggest what am I doing wrong? Here is the code-
<v-menu offset-y>
<template v-slot:activator="{ props }">
<v-btn
color="primary"
dark
v-bind="props"
#contextmenu.prevent="props.click"
>
Dropdown
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(item, index) in menuClick"
:key="index"
#click=""
>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>

Answer 1

I couldn't discover any context menu event in Vue3's doc and Vuetify's menu API. Although, I have an alternative in my mind that can do this job. You can utilize the .right modifier sync with v-model to open the menu with the right click of a button.
Here is the strategy-
Use v-model to control the v-menu toggling status.
On the right-click, set the v-model to true so the menu will be open.
On the left-click (default) set the v-model to false. (Do this step only if you don't want to open the menu on the default click.)
Here is a functioning demo-
const { createApp } = Vue
const { createVuetify } = Vuetify
const vuetify = createVuetify()
const app = createApp({
data: () => ({
menu: false,
items: [
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me' },
{ title: 'Click Me 2' },
],
}),
}).use(vuetify).mount('#app')
<script src="https://unpkg.com/vue#3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#3.1.2/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify#3.1.2/dist/vuetify.min.css">
<div id="app">
<v-app>
<div class="d-flex justify-space-around mb-5 font-weight-bold">
I will open only with the right-click.
</div>
<div class="d-flex justify-space-around">
<v-menu v-model="menu">
<template v-slot:activator="{ props }">
<v-btn
color="primary"
v-bind="props"
#click.left.prevent="menu = false"
#click.right.prevent="menu = true"
>
Dropdown
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(item, index) in items"
:key="index"
:value="index"
>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</v-app>
</div>