I'm using VueJS with the VuetifyJS material design components. How to position the Vuetify popover component below the MORE button? (Currently it's positioned on the upper left, I guess it's the fall back x=0, y=0.)

Button:

<button @click.prevent=openPopover>MORE</button>

Popover Vuetify 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>

JS:

    <script>

  export default {

    data: () => ({

      fav: true,

      menu: false,

      message: false,

      hints: true

    })

  }

</script>