title: Why onclick event doesn't work with vue-router?
body: <p>I want to use vue.js with vue-router, but the onclick doesn't work.</p>
  
  <p>in App.vue:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;hello&gt;&lt;/hello&gt;
      &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import hello from './components/hello/Hello.vue'
  
  export default {
    name: 'app',
    components: {
      hello
    }
  }
  &lt;/script&gt;
  &lt;style&gt;...&lt;/style&gt;
  </code></pre>
  
  <p>If I connect Hello.vue like above, I can't use onclick event (maybe another too, I can't try). After click on the button nothing happens.</p>
  
  <p>but if I connect Hello.vue in router:</p>
  
  <p>main.js ↓</p>
  
  <pre><code>import Vue from 'vue'
  import App from './App.vue'
  import VueRouter from 'vue-router';
  import hello from './components/hello/Hello.vue'
  
  new Vue({
    el: '#app',
    template: '&lt;App/&gt;',
    components: { App }
  });
  
  Vue.use(VueRouter);
  
  const routes = [
    {
      path: '/hello',
      name: 'hello',
      component: hello
    },
  ];
  
  var router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes
  });
  
  const app = new Vue({
    router
  }).$mount('#app');
  </code></pre>
  
  <p>then the button works! How I can use components not in router. For example change Hello.vue to topMenu.vue. I want use menu on all pages on site, but I don't want duplicate menu in each page component, it's not DRY!</p>