Cannot use v-for on stateful component root element because it renders multiple elements?
Your template has to have one root element. It's just one rule you cannot break. Since you're making a table, it would make sense to make tbody the root element.
var Users = { template: ` <tbody> <tr v-for="list in UsersData"> <th>{{ list.idx }}</th> <td>{{ list.id }}</td> </tr> </tbody> `, data: function () { return { UsersData //get data from query } }}index.blade.php
@extends('layout')@section('content')<table> <thead> <tr> <th>IDX</th> <th>ID</th> </tr> </thead> <users></users></table>@endsection
For the lazy: Vue interprets the root element having a v-for loop on it as producing multiple root level elements (a nono in modern JS frameworks).
Just wrap your template in a superfluous blank <div>. 👌