Laravel5.2 + Vue1.0，使用vue component的组件，数据不会显示?

Question

1. blade代码如下：

   @extends('layouts.app')
   
   @section('customHeader')
       <meta name="token" id="token" content="{{ csrf_token() }}">
   @endsection
   
   @section('content')
       <div id="app" class="container">
   
           <h1 class="text-muted">{{ $task->title }}</h1>
   
           <div class="col-md-4 col-md-offset-1">
               <div class="panel panel-default">
                   <div class="panel-heading">
                       <h2 v-if="remaings.length">
                           待完成的步骤(@{{ remaings.length }})
                           <span class="btn btn-sm btn-info" @click="completeAll">完成所有</span>
                       </h2>
                   </div>
                   <div class="panel-body">
                       <ul class="list-group">
                           <step-list v-for="step in steps | inProcess" :step="step" @edit="editStep(step)" @toggle="toggleCompletion(step)" @remove="removeStep(step)"></step-list>
                       </ul>
                   </div>
               </div>
           
           
               <div class="panel panel-default">
                   <div class="panel-heading">
                       <form @submit.prevent="addStep" class="form">
                           <div class="form-group">
                               <label v-if="!newStep">完成该任务(Task)需要哪些步骤(Step)呢？</label>
                               <input type="text" v-model="newStep" v-el:new-step class="form-control" placeholder="I need to ...">
                           </div>
                           <div class="form-group">
                               <button type="submit" class="btn btn-primary" v-if="newStep">添加步骤</button>
                           </div>
                       </form>
                   </div>
               </div>
           </div>
   
           <div class="col-md-4 col-md-offset-1">
               <div class="panel panel-default">
                   <div class="panel-heading">
                       <h3 v-show="completions.length">
                           已完成的步骤(@{{ completions.length }})
                           <span class="btn btn-sm btn-danger" @click="claerCompeted">清除所有已完成</span>
                       </h3>
                   </div>
   
                   <div class="panel-body">
                       <ul class="list-group">
                           <step-list v-for="step in steps | filterBy true in 'completed'" :step="step" @toggle="toggleCompletion(step)" @remove="removeStep(step)"></step-list>
                       </ul>
                   </div>
               </div>
           </div>
           <pre>
               @{{ $data | json }}
           </pre>
       </div>
   @endsection
   
   @section('customJS')
       <script src="{{ asset('js/app.js') }}"></script>
   @endsection

   2.app.js代码如下：

    var Vue = require('vue');
    var VueResource = require('vue-resource');
    var StepList = require('./components/stepList.vue');
    
    Vue.use(VueResource);
    
    Vue.http.headers.common['X-CSRF-TOKEN'] = $('#token').attr('content');
    var resource = Vue.resource(top.location + '/steps{/id}');
    
    new Vue({
        el: '#app',
        data: {
            steps: [
                { name: '', completed: false }
            ],
            newStep: '',
            baseURL : self.location + '/steps'
        },
        components: { StepList },
        ready:function(){
            this.fetchSteps();
        },
        methods: {
            fetchSteps: function(){
                resource.query().then((response) => {
                    // success
                    this.$set('steps', response.body);
                }, (response) => {
                    // error
                    response.status;
                });
            },
            addStep: function(){
                resource.save('', { name : this.newStep }).then((response) => {
                    // success
                    this.newStep = '';
                    this.fetchSteps();
                }, (response) => {
                    // error
                    response.status;
                });
            },
            removeStep: function(step){
                resource.delete({ id:step.id }).then((response) => {
                    // success
                    this.fetchSteps();
                }, (response) => {
                    // error
                    response.status;
                });
            },
            editStep: function(step){
                this.removeStep(step);
                this.newStep = step.name;
                this.$els.newStep.focus();
            },
            toggleCompletion: function(step){
                resource.update({ id:step.id }, { opposite : !step.completed }).then((response) => {
                    // success
                    this.fetchSteps();
                }, (response) => {
                    // error
                    response.status;
                });
            },
            completeAll: function(){
                this.$http.post(this.baseURL + '/complete').then((response) => {
                    // success
                    this.fetchSteps();
                }, (response) => {
                    // error
                    response.status;
                });
            },
            claerCompeted: function(){
                this.$http.delete(this.baseURL + '/clear').then((response) => {
                    // success
                    this.fetchSteps();
                }, (response) => {
                    // error
                    response.status;
                });
            }
        },
        computed: {
            completions: function(){
                return this.steps.filter(function(step){
                    return step.completed;
                });
            },
            remaings: function(){
                return this.steps.filter(function(step){
                    return !step.completed;
                });
            }
        },
        filters: {
            inProcess: function(steps){
                return steps.filter(function(step){
                    return ! step.completed;
                });
            }
        }
    })

3.stepList.vue文件代码如下：

<template>
<li class="list-group-item">
    <span @dblclick="editStep(step)">{{ step.name }}</span>
    <span class="pull-right">
        <i class="fa fa-check " @click="toggleCompletion(step)"></i>
        <i class="fa fa-close " @click="removeStep(step)"></i>
    </span>
</li>
</template>

<script>
    export default {
        props:['step'],
        methods:{
            editStep: function(step){
                this.$dispatch('edit', this.step);
            },
            toggleCompletion: function(step){
                this.$dispatch('toggle', step);
            },
            removeStep: function(step){
                this.$dispatch('remove', step);
            }
        }
    }
</script>

<style>
    
</style>

4.页面输出的样子：