title: Vuetify - Set active class for submenu item when selected
body: <p>I have a Vue/Vuetify  app that has a left nav menu, and it was originally created before my time with just a single level of items. I've had to add a second level of menu items, and they work fine to the extent that they expand when the parent item is clicked, and when clicked they do what they should. The thing I can't quite figure out is how to 1) highlight the selected submenu item and 2) remove the highlighting from the parent item when clicked.</p>
  
  <p>Here is the markup for the element:</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-list dark class="ap-sidebar-applist"&gt;
      &lt;v-list-group
        class="ap-sidebar-group"
        v-for="(item, i) in items"
        :key="i"
        :prepend-icon="item.icon"
        :value="item.visible"
        @click="onClick(item)"
      &gt;
        &lt;v-list-tile slot="activator"&gt;
          &lt;v-list-tile-title&gt;{{ item.title }}&lt;/v-list-tile-title&gt;
        &lt;/v-list-tile&gt;
        &lt;div v-if="item.children"&gt;
          &lt;v-list-tile class="sub-list"
            v-for="(subMenu, j) in item.children"
            :key="j"
            @click="onClick(subMenu, true)"
            active-class="default-class sub-list"
          &gt;
            &lt;v-list-tile-action&gt;
              &lt;v-icon&gt;{{ subMenu.icon }}&lt;/v-icon&gt;
            &lt;/v-list-tile-action&gt;
            &lt;v-list-tile-title&gt;{{ subMenu.title }}&lt;/v-list-tile-title&gt;
          &lt;/v-list-tile&gt;
        &lt;/div&gt;
      &lt;/v-list-group&gt;
  
  &lt;!--&lt;/v-list-group&gt; --&gt;
    &lt;/v-list&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>And here is a full <a href="https://codepen.io/wonder95/pen/xoORpb" rel="nofollow noreferrer">CodePen</a>. One note for the CodePen is that the <code>setCurrentWorkspace</code> called from <code>onClick()</code> is a Vuex action that is used higher up the component tree to highlight menu tabs elsewhere in the app.</p>
  
  <p>What I'm seeing is that the <code>sub-class</code> class (defined in <code>active-class</code> for the child items) is applied to both of the submenu items when the parent <code>Templates</code> item is selected, and the <code>v-list__group__header--active</code> class remains on the parent item as well.</p>
  
  <p>Do I need to manually remove the active class from the parent <code>Templates</code> item, and also remove it manually from the other submenu item? Or is there an easier way to do this with the current Vuetify API? </p>