在Pug和Sidestepping指令中重写Vue.js代码

Question

我刚刚看到了一个Vue.js示例，该示例在主应用程序文件中具有以下内容：

<div>
    <Header v-bind:title="title" v-on:changeTitle="updateTitle($event)"></Header>
    <Ninjas v-bind:ninjas="ninjas"></Ninjas>
    <ul>
        <li v-for="ninja in ninjas">{{ ninja.name }}</li>
    </ul>
    <Footer v-bind:title="title"></Footer>
</div>

现在，我只是在PUG中重写了上面的代码，如下所示：

<template lang="pug">
  div
    header( :title="title" , v-on:changeTitle="updateTitle($event)" )
      div( slot="lala" ) Why not a slot bro
    ninjas( :ninjas="ninjas" )  
      ul
        li( v-for="ninja in ninjas" ) {{ ninja.name }}
    footer(v-bind:title="title")
</template>

一切正常，除了header组件中的文本没有显示之外，我在这里做错了什么？据我所知，我通过执行:title="title" , v-on:changeTitle="updateTitle($event)"正确地传递了绑定，我是否放错了任何属性/指令？