I have a custom `navMenu` component that I show twice on my page - once across the top, and once hidden in a `v-navigation-drawer` until the screen width gets small enough to show it:

```html
<template>
  <nav>
    <v-app-bar app hide-on-scroll>
      <template #extension v-if="$vuetify.breakpoint.smAndUp">
        <v-container>
          <v-row>
            <v-spacer />
            <navMenu :items="menuItems" />
            <v-spacer />
          </v-row>
        </v-container>
      </template>

      <v-app-bar-nav-icon
        @click="toggleDrawer()"
        v-if="$vuetify.breakpoint.xs"
      />
      <img id="logo"
             alt="corporate logo"
        src="@/assets/full_logo.svg"
        width="200"
        height="60"
      />
      <v-spacer />
      <h3 class="info--text headline">My Fancy Website</h3>
    </v-app-bar>

    <v-navigation-drawer app
                         v-model="drawer"
                         v-if="$vuetify.breakpoint.smAndDown">
      <navMenu :items="menuItems" />
    </v-navigation-drawer>
  </nav>
</template>

```

**NavMenu.vue**

```html
<template>
    <v-col v-for="(item, index) in items" :key="index">
      <div v-if="item.children">
        <v-menu transition="slide-y-transition" bottom>
          <template #activator="{ on }">
            <v-btn text v-on="on">{{ item.label }}</v-btn>
          </template>
          <v-list>
            <v-list-item
              v-for="(child, j) in item.children"
              :key="j"
              router
              :exact="child.exact"
              :to="{ name: child.routeName }"
            >
              <v-list-item-title class="text-capitalize">
                {{ child.label }}
              </v-list-item-title>
            </v-list-item>
          </v-list>
        </v-menu>
      </div>
      <div v-else>
        <v-btn text router :to="{ name: item.routeName }" :exact="item.exact">
          {{ item.label }}
        </v-btn>
      </div>
    </v-col>
</template>

```

...you may have noticed a fatal flaw in my component: you can't iterate on a root element! Simple enough, wrap it in a `<div />`, right? **Wrong.** Wrapping the contents of the template in a `div` really screws up the layout of the menu items - it renders them stacked vertically instead of horizontally - I think the CSS is looking for a direct child or something. 

Is there some alternative element that I can use for the template to satisfy the "one root element" edict that doesn't render any output? Oh, and I tried using the `<template />` element already - you can't use it as a root element.