title: Vue v-on:click does not work on component
body: <p>I'm trying to use the on click directive inside a component but it does not seem to work. When I click the component nothings happens when I should get a 'test clicked' in the console. I don't see any errors in the console, so I don't know what am I doing wrong.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;vuetest&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="app"&gt;&lt;/div&gt;
      &lt;!-- built files will be auto injected --&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>App.vue</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;test v-on:click="testFunction"&gt;&lt;/test&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Test from './components/Test'
  
  export default {
    name: 'app',
    methods: {
      testFunction: function (event) {
        console.log('test clicked')
      }
    },
    components: {
      Test
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Test.vue (the component)</strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      click here
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'test',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
  &lt;/script&gt;
  </code></pre>