Vuetify issue with v-menu : <p>Vuetify 1.1.8 / Vue 2.5.16</p>

<p>I don't understand why I get 2 different behaviors :</p>

<p>1- testing in Codepen.io</p>

<p><strong>html</strong></p>

<pre><code>    &lt;div id="app"&gt;
      &lt;v-app id="inspire"&gt;
        &lt;div class="text-xs-center"&gt;
          &lt;v-menu offset-y&gt;
            &lt;v-btn
              slot="activator"
              color="primary"
              dark
            &gt;
              &lt;span v-if="this.locale === 'en'"&gt;English&lt;/span&gt;
              &lt;span v-if="this.locale === 'fr'"&gt;Français&lt;/span&gt;
              &lt;span v-if="this.locale === 'br'"&gt;Português&lt;/span&gt;
            &lt;/v-btn&gt;
            &lt;v-list&gt;
              &lt;v-list-tile
                v-for="(locale, index) in locales"
                :key="index"
                @click="switchLocale(index)"
              &gt;
                &lt;v-list-tile-title&gt;{{ locale.title }}&lt;/v-list-tile-title&gt;
              &lt;/v-list-tile&gt;
            &lt;/v-list&gt;
          &lt;/v-menu&gt;
        &lt;/div&gt;
      &lt;/v-app&gt;
    &lt;/div&gt;
</code></pre>

<p>js</p>

<pre><code>    new Vue({
      el: '#app',
      data: () =&gt; ({
        locale: 'en',
        locales: [
          { locale: 'en', title: 'English', icon: '@/assets/images/flag_gb_24.png' },
          { locale: 'fr', title: 'Français', icon: '@/assets/images/flag_fr_24.png' },
          { locale: 'br', title: 'Português', icon: '@/assets/images/flag_br_24.png' }
        ]
      }),
       methods: {
        switchLocale: function (index) {
          console.log('switch locale: ', this.locales[index].title)
          this.locale = this.locales[index].locale
        }
      }
    })
</code></pre>

<p>is running fine...</p>

<p>BUT once I insert it into a Vue.js component in my app, I get an error :</p>

<p><strong>console</strong></p>

<pre><code>    vuetify.js?ce5b:19387 [Vuetify] Unable to locate target [data-app]

    found in

    ---&gt; &lt;VMenu&gt;
           &lt;VToolbar&gt;
             &lt;Toolbar&gt;
               &lt;App&gt; at src/App.vue
                 &lt;Root&gt;
    consoleWarn @ vuetify.js?ce5b:19387
    initDetach @ vuetify.js?ce5b:16782
    mounted @ vuetify.js?ce5b:16742
    callHook @ vue.runtime.esm.js?2b0e:2917
    insert @ vue.runtime.esm.js?2b0e:4154
    invokeInsertHook @ vue.runtime.esm.js?2b0e:5956
    patch @ vue.runtime.esm.js?2b0e:6175
    Vue._update @ vue.runtime.esm.js?2b0e:2666
    updateComponent @ vue.runtime.esm.js?2b0e:2784
    get @ vue.runtime.esm.js?2b0e:3138
    run @ vue.runtime.esm.js?2b0e:3215
    flushSchedulerQueue @ vue.runtime.esm.js?2b0e:2977
    (anonymous) @ vue.runtime.esm.js?2b0e:1833
    flushCallbacks @ vue.runtime.esm.js?2b0e:1754
    Promise.then (async)
    microTimerFunc @ vue.runtime.esm.js?2b0e:1802
    nextTick @ vue.runtime.esm.js?2b0e:1846
    queueWatcher @ vue.runtime.esm.js?2b0e:3064
    update @ vue.runtime.esm.js?2b0e:3205
    Vue.$forceUpdate @ vue.runtime.esm.js?2b0e:2687
    (anonymous) @ index.js?6435:233
    (anonymous) @ index.js?6435:231
    (anonymous) @ index.js?6435:116
    (anonymous) @ Toolbar.vue?be73:29
    ./src/components/Shared/Toolbar.vue @ app.js:2759
    __webpack_require__ @ app.js:768
    hotApply @ app.js:687
    (anonymous) @ app.js:344
    Promise.then (async)
    hotUpdateDownloaded @ app.js:343
    hotAddUpdateChunk @ app.js:319
    webpackHotUpdateCallback @ app.js:37
    (anonymous) @ app.a888e56db407050b2768.hot-update.js:1
    Toolbar.vue?9799:67 TOOLBAR mounted locale:  en
</code></pre>

<p><strong>Toolbar.vue</strong></p>

<pre><code>       &lt;template&gt;
          &lt;v-toolbar height="80px" fixed&gt;
            &lt;v-toolbar-title&gt;
              &lt;img src="@/assets/images/app_logo.png" alt=""&gt;
              &lt;v-menu offset-y&gt;
                &lt;v-btn
                  slot="activator"
                  color="primary"
                  dark
                &gt;
                  &lt;span v-if="this.locale === 'en'"&gt;English&lt;/span&gt;
                  &lt;span v-if="this.locale === 'fr'"&gt;Français&lt;/span&gt;
                  &lt;span v-if="this.locale === 'br'"&gt;Português&lt;/span&gt;
                &lt;/v-btn&gt;
                &lt;v-list&gt;
                  &lt;v-list-tile
                    v-for="(locale, index) in locales"
                    :key="index"
                    @click="switchLocale(index)"
                  &gt;
                    &lt;v-list-tile-title&gt;{{ locale.title }}&lt;/v-list-tile-title&gt;
                  &lt;/v-list-tile&gt;
                &lt;/v-list&gt;
              &lt;/v-menu&gt;
            &lt;/v-toolbar-title&gt;
            &lt;v-spacer&gt;&lt;/v-spacer&gt;
            &lt;v-toolbar-items&gt;
              ....
            &lt;/v-toolbar-items&gt;
       &lt;/v-toolbar&gt;
    &lt;/template&gt;

    &lt;script&gt;
    export default {
      name: 'Toolbar',
      props: ['appName'],
      data () {
        return {
          menuItems: {
            home: { icon: 'home', title: 'Home', link: '/' },
            about: { icon: 'info', title: 'About', link: '/about' }
          },
          locale: 'en',
          locales: [
            { locale: 'en', title: 'English', icon: '@/assets/images/flag_gb_24.png' },
            { locale: 'fr', title: 'Français', icon: '@/assets/images/flag_fr_24.png' },
            { locale: 'br', title: 'Português', icon: '@/assets/images/flag_br_24.png' }
          ]
        }
      },
      methods: {
        switchLocale: function (index) {
          console.log('switch locale: ', this.locales[index].title)
          this.locale = this.locales[index].locale
        }
      },
      mounted () {
        console.log('TOOLBAR mounted locale: ', this.locale)
      }
    }
    &lt;/script&gt;
</code></pre>
