Vue.jsのtemplateで<div>にv-forを入れると表示されない

Question

#質問内容
現在Vue.jsの練習にphpからjavascritpに渡したデータでテーブルを作成しようとしていたのですが表記の通りtemplateで<div>にv-forを入れると表示がされません。
内容としてはphpでechoしたのをjavascriptのaxiosで受け取って一定数以上ならデータを分割し、分割ごとにテーブルを作るという感じです。
Vue DevToolsを見るとデータは問題ないようなので何がいけないのかよろしくお願いします。

##状況
・Vue Devtools上で確認するとデータは問題ないよう。
・<div>のv-forを外せば問題なく表示できる。

#プログラム
渡すデータなのですが多いため省略した形で表記させていただきます。
実際は30個のデータを含む配列を7個格納した配列が$dataに入っています。
それを今回は15個ずつに分割しています。

<?php
$data = [[1,1,1,1,1,1,1,...,1,1],
         [2,2,2,2,2,2,2,...,2,2], 
         ...
         [7,7,7,7,7,7,7,...,7,7]];
echo json_encode($data , JSON_UNESCAPED_UNICODE);

let TableMake = Vue.extend({
    data: function () {
        return {
            items: []
        }
    },
    mounted: function () {
        var self = this;
        axios
            .get('./ファイル名.php')
            .then(function (res) {
                let n = 15;
                let len = Math.round(res.data[0].length / n, 10);
                self.items = new Array(len);
                for(let j=0;j<len;j++){
                    self.items[j] = [];
                    for(let i = 0; i<res.data.length;i++){
                        self.items[j][i] = [];
                        self.items[j][i] = res.data[i].slice(j*n, j*n+n)
                    }
                }
            });
    },
    template: '<div v-for="item in items"><table v-for="ite in item">' +
        '<tr v-for="it in ite">' +
        '<td v-for="val in it">' +
        '{{val}}</td>' +
        '</tr></table></div>'

});
let app = new Vue({
    el: '#app',
    data: {
        name: 'Vue.js'
    },
    components: {
        'datatable': TableMake
    }
});

<div id="app">
     <datatable></datatable>
</div>

#参考サイト
分割プログラムの元にしたサイト
axiosの使い方、テーブル作成の参考にしたサイト

Answer 1

単一のルート要素にあるように、コンポーネント内のルート要素は複数存在できません。

ですので、v-forを外すと表示できますし、つけるとルート要素が複数になり表示されません。

回避策としては↑のリンクにもあるようにもう一つ上位に<div>等でラップすることで回避できます。

<div v-for="">
~~
<div>

↓

<div>
  <div v-for="">
  ~~
  <div>
<div>

Comments

[cometbeet]

ありがとうございます！
問題なく表示できました。
すっかりその部分見逃してました。
公式ドキュメントしっかり読むようにします。