Cannot use v-for on stateful component root element because it renders multiple elements? : <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>
