title: Vue 2.0 click event from inside component not registering
body: <p>I have a Vue app, which has a component in it that represents the whole page. Inside that component, I have another component which represents (for example) a menu. Inside that menu, I have a button with a @click handler that Vue is supposed to handle. However, that is not happening, and I'm going mad. Please help!</p>
  
  <p>I have a blue bordered button that you are supposed to click for the EXPAND text to change. The components work just fine, and the text is rendered differently when I change the value of the 'expanded' property in the menu component. But I cannot get that value to change as a result of the click.</p>
  
  
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component('vuemenu', {
   template: '#menu-template',
    data: function() {
      return {
       expanded: false
      }
    },
    methods: {
     expand: function() {
       this.expand = !this.expanded;
      }
    }
  })
  
  Vue.component('page', {
   template: '#page-template',
    methods: {
    }
  })
  
  new Vue({
    el: '#app',
    data: {
    },
    methods: {
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.expanded {
    background-color: red;
    color: white;
    font-size: 72px;
  }
  
  .clickme {
    padding: 10px;
    border: 1px solid blue;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
    &lt;page&gt;&lt;/page&gt;
  &lt;/div&gt;
  
  &lt;template id="page-template"&gt;
    &lt;div id="page"&gt;
    Here is the menu
      &lt;vuemenu&gt;&lt;/vuemenu&gt;
      And here is the rest of the page
    &lt;/div&gt;
  &lt;/template&gt;
  https://stackoverflow.com/questions/ask#
  &lt;template id="menu-template"&gt;
    &lt;div id="menu"&gt;
    Menu
    &lt;div class="clickme" @click="expand"&gt;
    click
    &lt;/div&gt;
    &lt;div :class="{'expanded': expanded}"&gt;
      EXPAND
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>