title: Cannot use v-for on stateful component root element because it renders multiple elements?
body: <p>app.js</p>
  
  <pre><code>var Users = {
      template: `
          &lt;tr v-for="list in UsersData"&gt;
              &lt;th&gt;{{ list.idx }}&lt;/th&gt;
              &lt;td&gt;{{ list.id }}&lt;/td&gt;
          &lt;/tr&gt;
      `,
      data: function () {
          return {
              UsersData //get data from query
          }
      }
  }
  
  var mainview = new Vue({
      el: "#mainview",
      components: {
          'users': Users
      },
      method: {}
  })
  </code></pre>
  
  <p>layout.blade.php</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="container"&gt;
          &lt;aside&gt;...&lt;/aside&gt;
          &lt;main id="mainview"&gt;
              @section('content')
              @show
          &lt;/mainview&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>index.blade.php</p>
  
  <pre><code>@extends('layout')
  @section('content')
  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;IDX&lt;/th&gt;
              &lt;th&gt;ID&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;users&gt;&lt;/users&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  @endsection
  </code></pre>
  
  <p>ERROR LOG from chrome console</p>
  
  <p>[Vue warn]: Cannot use v-for on stateful component root element because it renders multiple elements:</p>
  
  <pre><code>&lt;tr v-for="list in UsersData"&gt;
      &lt;th&gt;{{ list.idx }}&lt;/th&gt;
      &lt;td&gt;{{ list.id }}&lt;/td&gt;
  &lt;/tr&gt; 
  </code></pre>
  
  <p>vue.js:525 [Vue warn]: Multiple root nodes returned from render function. Render function should return a single root node. 
  (found in component )</p>
  
  <p>How should I fix code?</p>