Vue 子のコンポーネントでV-forがうごかない

Question

Vueを初めて触りました。
初心者です。
子となるコンポーネントに親からデータを渡さず
子だけでデータ
<child></child>の部分に
コンポーネントのDataCompでのデータを
テンプレートを使用して反映させたいと考えていますが。
できません。

どういった方法で対応するとよいのでしょうか？

<form id="test" @submit="checkForm" action="/something" method="post">
<child></child>

 
  <p v-if="errors.length">
    <b>Please correct the following error(s):</b>
    <ul>
      <li v-for="error in errors">{{ error }}</li>
    </ul>
  </p>
  
 <div class="form-group">
   <label for="name">Name</label>
    <input type="text" name="name" id="name" v-model="name" class="form-control">
  </div>

  <div class="form-group">
    <label for="age">Age</label>
    <input type="number" name="age" id="age" v-model="age" min="0" max="130" class="form-control">
  </div>

   <div class="form-group">

    <label for="email">Email</label>
    <input type="email" name="email" id="email" v-model="email" class="form-control">


   </div>

 <div class="form-group">
    <input type="submit" value="Submit" class="btn btn-primary">  
  </div>

</form>

var DataComp = {
    template: '<div v-for="t in todos">{{t.text}}</div>',
    data: function(){
      return {
       todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
      }
    }
}

const app = new Vue({
  el:'#test',
  data:{
    errors:[],
    name:null,
    email:null
  },
  components: {
      'child': DataComp,
    },
  methods:{
    checkForm:function(e) {
      this.errors = [];
      if(!this.name) this.errors.push("Name required.");
      if(!this.email) {
        this.errors.push("Email required.");
      } else if(!this.validEmail(this.email)) {
        this.errors.push("Valid email required.");
      }
      if(!this.errors.length) return true;
      e.preventDefault();
    },
    validEmail:function(email) {
      var re = /^(([^<>()[]\.,;:\s@"]+(.[^<>()[]\.,;:\s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z\-0-9]+.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
    }
  
  }
})

Answer 1

テンプレートのルート要素は1つにする必要があります。
例えば以下のように <div> で囲ってみると動くかと思います。

template: '<div><div v-for="t in todos">{{t.text}}</div></div>',

Answer 2

2箇所ほど気になったところが

1. templateの下のトップタグは複数禁止...

DataCompのtemplateですが、
v-forで複数になる可能性があるのでエラーになります。

template: '<div> <div v-for="t in todos">tt</div> </div>'

とでもして囲む

2.dataは関数で...
親のコンポーネントですが、

data:{
  errors:[],
  name:null,
  email:null
}

と、オブジェクトを入れてます。

data: function () {
  return {
    errors:[],
    name:null,
    email:null
  }
}

で動くかも