Component method not working?

Question

JavaScript

'use strict';

Vue.component('MainMenu', {
  template: '#Main-menu',
  methods: {
    hover: function( id) {
      console.log(id);
    }
  }
});

let application = new Vue({
  el: '#application'
});

Answer 1

I found a solution, it turns out the problem was that the template wrapper cannot be nested in the application container

Answer 2

I think that it is not correct usage, you need to write a template for the component separately:

<script type="text/x-template" id="main-menu">
  <p>Your template is here</p>
</script>

And then in the main component:

<div id="application">
<main-menu></main-menu>
</div>