Laravel 带有Gulp的Vuejs单文件组织

我与Laravel一起遵循了关于Vue的工作流程

所以我有一个main.js：

var Vue =require('vue');

import Tournament from '../components/Tournament.vue';
new Vue({
    el: 'body',
    components: {Tournament},

    ready(){
        alert('Ready To Go');
    }

});

然后我有了我的比赛。vue：

<template>
    I can't see this text on screen

</template>

<script>
    export default  {
        props: ['list'],

    }
</script>

我还尝试使用data（）显示动态数据，但没有成功

知道我忘了什么吗

var Vue = require('vue');
import Tournament from '../components/Tournament.vue'; 

new Vue({
    el: 'body', 
    components: {template: Tournament}, 
    ready() {
        alert('Ready To Go'); 
    }
});

这样行吗

     I can't see this text on screen

var Vue = require('vue');
import Tournament from '../components/Tournament.vue'; 

new Vue({
    el: 'body', 
    components: {template: Tournament}, 
    ready() {
        alert('Ready To Go'); 
    }
});