title: Vue component returning multiple table rows
body: <p>I'm attempting to return two tr elements from a single component <code>v-design-row</code>. I know vue requires the template elements to be wrapped in a div, but I cannot wrap them in a div because of the tag structure html tables require. When I add the second <code>tr</code> in the <code>v-design-row</code> component then vue doesn't render anything.</p>
  
  <p>Can anyone suggest the best method for accomplishing this?</p>
  
  <p>main.vue</p>
  
  <pre><code>   &lt;table class="table"&gt;
          &lt;thead&gt;
              &lt;th&gt;Image&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Description&lt;/th&gt;
              &lt;th&gt;Status&lt;/th&gt;
              &lt;th&gt;Order&lt;/th&gt;
              &lt;th&gt;Edit&lt;/th&gt;
              &lt;th&gt;Delete&lt;/th&gt;
          &lt;/thead&gt;
          &lt;tbody v-for="catagory in catagories"&gt;
              &lt;v-catagory-row :catagory="catagory"&gt;&lt;/v-catagory-row&gt;
              &lt;v-design-row v-for="design in catagory.designs" :design="design"&gt;&lt;/v-design-row&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>v-design-row.vue</p>
  
  <pre><code>&lt;template&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;img :src="design.image_directory" :alt="design.name"&gt;&lt;/td&gt;
      &lt;td&gt;{{ design.name }}&lt;/td&gt;
      &lt;td&gt;
          &lt;button class="btn btn-secondary" type="button" data-toggle="collapse" :data-target="'#' + design.identifier" aria-expanded="false" :aria-controls="design.identifier"&gt;
              &lt;i class="fa fa-plus" aria-hidden="true"&gt;&lt;/i&gt; Show
          &lt;/button&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;div class="switch"&gt;
              &lt;input :id="'active'+design.id" v-model="design.active" class="btn-toggle btn-toggle-round-flat" type="checkbox"&gt;
              &lt;label :for="'active'+design.id"&gt;&lt;/label&gt;
          &lt;/div&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;button class="btn btn-secondary" type="button"&gt;
              &lt;i class="fa fa-caret-up" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/button&gt;
          &lt;button class="btn btn-secondary" type="button"&gt;
              &lt;i class="fa fa-caret-down" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/button&gt;
          {{ design.sort_order }}
      &lt;/td&gt;
      &lt;td&gt;
          &lt;button class="btn btn-secondary" type="button"&gt;
              &lt;i class="fa fa-pencil" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/button&gt;
      &lt;/td&gt;
      &lt;td&gt;
          &lt;button class="btn btn-secondary" type="button"&gt;
              &lt;i class="fa fa-trash" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/button&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td class="p-0" colspan="7"&gt;
          &lt;div class="collapse" :id="design.identifier"&gt;
              &lt;div class="p-3"&gt;
                  {{ design.description }}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/template&gt;
  </code></pre>