title: How to create Nested menus on Vuetify?
body: <p>I'm currently usinfg Vuetify 1.5.18 and having some issues trying to create a nested menu usint the <code>toolbar</code> component and <code>list-group</code>.</p>
  
  <p>The menu is working but when I click to expand it closes.</p>
  
  <p>Here's the CodePen: <a href="https://codepen.io/fabiozanchi/pen/dybBmKj" rel="nofollow noreferrer">https://codepen.io/fabiozanchi/pen/dybBmKj</a></p>
  
  <p>And here the following code:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;v-app id="inspire"&gt;
      &lt;v-toolbar&gt;
        &lt;v-toolbar-title&gt;Title&lt;/v-toolbar-title&gt;
        &lt;v-spacer&gt;&lt;/v-spacer&gt;
        &lt;v-toolbar-items class="hidden-sm-and-down"&gt;
          &lt;v-btn flat&gt;Link One&lt;/v-btn&gt;
          &lt;v-btn flat&gt;Link Two&lt;/v-btn&gt;
          &lt;v-btn flat&gt;Link Three&lt;/v-btn&gt;
          &lt;v-menu open-on-hover bottom offset-y&gt;
          &lt;template v-slot:activator="{ on }"&gt;
            &lt;v-btn
              color="primary"
              dark
              v-on="on"
            &gt;
              Dropdown
            &lt;/v-btn&gt;
          &lt;/template&gt;
  
          &lt;v-list&gt;
              &lt;v-list-group
                v-for="item in items"
                :key="item.title"
                v-model="item.active"
                :prepend-icon="item.action"
                no-action
              &gt;
                &lt;template v-slot:activator&gt;
                  &lt;v-list-tile&gt;
                    &lt;v-list-tile-content&gt;
                      &lt;v-list-tile-title&gt;{{ item.title }}&lt;/v-list-tile-title&gt;
                    &lt;/v-list-tile-content&gt;
                  &lt;/v-list-tile&gt;
                &lt;/template&gt;
  
                &lt;v-list-tile
                  v-for="subItem in item.items"
                  :key="subItem.title"
                  @click=""
                &gt;
                  &lt;v-list-tile-content&gt;
                    &lt;v-list-tile-title&gt;{{ subItem.title }}&lt;/v-list-tile-title&gt;
                  &lt;/v-list-tile-content&gt;
  
                  &lt;v-list-tile-action&gt;
                    &lt;v-icon&gt;{{ subItem.action }}&lt;/v-icon&gt;
                  &lt;/v-list-tile-action&gt;
                &lt;/v-list-tile&gt;
              &lt;/v-list-group&gt;
            &lt;/v-list&gt;
        &lt;/v-menu&gt;
        &lt;/v-toolbar-items&gt;
      &lt;/v-toolbar&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>new Vue({
    el: '#app',
    data: () =&gt; ({
      items: [
          {
            action: 'local_activity',
            title: 'Attractions',
            items: [
              { title: 'List Item' }
            ]
          },
          {
            action: 'restaurant',
            title: 'Dining',
            active: true,
            items: [
              { title: 'Breakfast &amp; brunch' },
              { title: 'New American' },
              { title: 'Sushi' }
            ]
          },
          {
            action: 'school',
            title: 'Education',
            items: [
              { title: 'List Item' }
            ]
          },
          {
            action: 'directions_run',
            title: 'Family',
            items: [
              { title: 'List Item' }
            ]
          },
          {
            action: 'healing',
            title: 'Health',
            items: [
              { title: 'List Item' }
            ]
          },
          {
            action: 'content_cut',
            title: 'Office',
            items: [
              { title: 'List Item' }
            ]
          },
          {
            action: 'local_offer',
            title: 'Promotions',
            items: [
              { title: 'List Item' }
            ]
          }
        ]
    })
  })
  </code></pre>