title: How to position the VuetifyJS popover component?
body: <p>I'm using VueJS with the VuetifyJS material design components. How to position the <a href="https://vuetifyjs.com/en/components/menus#example-popover" rel="nofollow noreferrer">Vuetify popover component</a> below the <em>MORE</em> button? (Currently it's positioned on the upper left, I guess it's the fall back x=0, y=0.)</p>
  
  <p>Button:</p>
  
  <pre><code>&lt;button @click.prevent="openPopover"&gt;MORE&lt;/button&gt;
  </code></pre>
  
  <p>Popover Vuetify template:</p>
  
  <pre><code> &lt;template&gt;
    &lt;div class="text-xs-center"&gt;
      &lt;v-menu
        offset-x
        :close-on-content-click="false"
        :nudge-width="200"
        v-model="menu"
      &gt;
        &lt;v-btn color="indigo" dark slot="activator"&gt;Menu as Popover&lt;/v-btn&gt;
        &lt;v-card&gt;
          &lt;v-list&gt;
              &lt;v-list-tile-action&gt;
                &lt;v-btn
                  icon
                  :class="fav ? 'red--text' : ''"
                  @click="fav = !fav"
                &gt;
                  &lt;v-icon&gt;favorite&lt;/v-icon&gt;
                &lt;/v-btn&gt;
              &lt;/v-list-tile-action&gt;
            &lt;/v-list-tile&gt;
          &lt;/v-list&gt;
      &lt;/v-menu&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>    &lt;script&gt;
    export default {
      data: () =&gt; ({
        fav: true,
        menu: false,
        message: false,
        hints: true
      })
    }
  &lt;/script&gt;
  </code></pre>