When using VueJS with VuetifyJS material design components, how can I adjust the positioning of the Vuetify popover component to appear below the MORE button? The current placement is in the upper left corner which I believe defaults to x=0, y=0.
Button:
<button @click.prevent="openPopover">MORE</button>
Vuetify Popover Template:
<template>
<div class="text-xs-center">
<v-menu
offset-x
:close-on-content-click="false"
:nudge-width="200"
v-model="menu"
>
<v-btn color="indigo" dark slot="activator">Menu as Popover</v-btn>
<v-card>
<v-list>
<v-list-tile-action>
<v-btn
icon
:class="fav ? 'red--text' : ''"
@click="fav = !fav"
>
<v-icon>favorite</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-menu>
</div>
</template>
JavaScript:
<script>
export default {
data: () => ({
fav: true,
menu: false,
message: false,
hints: true
})
}
</script>