Vue.js Vue 2.0未注册组件内部的单击事件

我有一个Vue应用程序，其中有一个代表整个页面的组件。在该组件中，我有另一个组件，它表示（例如）菜单。在该菜单中，我有一个带有@click处理程序的按钮，Vue应该处理该按钮。然而，这并没有发生，我要发疯了。请帮忙

我有一个蓝色边框的按钮，你应该点击它来更改展开文本。这些组件工作得很好，当我更改菜单组件中“expanded”属性的值时，文本呈现方式会有所不同。但我无法通过单击更改该值

Vue.component（'vuemenu'{
模板：“#菜单模板”，
数据：函数（）{
返回{
扩展：false
}
},
方法：{
展开：函数（）{
this.expand=！this.expanded；
}
}
})
Vue.component（'页面'{
模板：“#页面模板”，
方法：{
}
})
新Vue({
el:“#应用程序”，
数据：{
},
方法：{
}
})

.expanded{
背景色：红色；
颜色：白色；
字体大小：72px；
}
.点击我{
填充：10px；
边框：1px纯蓝色；
光标：指针；
}

这是菜单
这是这一页的其余部分
https://stackoverflow.com/questions/ask#
菜单
点击
扩大

此代码中存在错误

Vue.component('vuemenu', {
    template: '#menu-template',
  data: function() {
    return {
        expanded: false
    }
  },
  methods: {
    expand: function() {
        this.expanded = !this.expanded; // this.expanded not this.expand
    }
  }
})

Vue.component('page', {
    template: '#page-template',
  methods: {
  }
})

new Vue({
  el: '#app',
  data: {
  },
  methods: {
  }
})

---

this.expand=！这就扩大了,

可能应该是

this.expanded=！这就扩大了,