title: vuejs onclick behaviour on template's component
body: <p>I have some issue during developing vue's template onclick event. So, i can open module when I click the file, I have seen some sample with native. unfortunately, still not suit into my code and can't reach into console. here's my code :</p>
  
  <p>I try to add native but still no response on console log. </p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div id="app"&gt;
  &lt;notification :notice="notice" &gt;&lt;/notification&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code>const myTest = [ 
    {
      title: 'mamam',
      body: 'Mamamia',
      type: 'success'
    },{
      title: 'Perlu',
      body: 'Hati-hati sedang ada perbaikan',
      type: 'Danger'
    },{
      title: 'Notification',
      body: 'Repellendus quod aliquid ad, quae harum similique facilis aliquam. Dolorum deserunt alias officia atque dolor, voluptas harum. Inventore reiciendis reprehenderit provident!',
      type: 'primary'
    } 
  ];
  
  function randomInt(min, max) {
    let rand = min - 0.5 + Math.random() * (max - min + 1);
    rand = Math.round(rand);
    return rand;
  };
  
  Vue.component('notification', {
    template: 
    `
    &lt;div class="Notification" v-show="notice"&gt;
      &lt;div class="notice" :class="notice.type"&gt;
        &lt;svg @click="notice=!notice" class="close" width="20" height="20" viewbox="0 0 20 20" stroke-width="2"&gt;
          &lt;line x1="3" y1="3" x2="17" y2="17"&gt;&lt;/line&gt;
          &lt;line x1="3" y1="17" x2="17" y2="3"&gt;&lt;/line&gt;
        &lt;/svg&gt;
        &lt;div class="title"&gt;
          &lt;i class="type" :class="notice.type"&gt;{{notice.type}}&lt;/i&gt;
          {{notice.title}}
        &lt;/div&gt;
        &lt;div class="body"&gt;
          &lt;i class="type" :class="notice.type"&gt;{{notice.body}}&lt;/i&gt;
          &lt;a @click.native="showFile"&gt; File &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    `,
    props: {
       notice: {
        type: [Object, Array]
      },
    },
  });
  
  setInterval(() =&gt; ( vm.$data.index = randomInt(0, 6) ), randomInt(100, 10000) );
  
  const vm = new Vue({
    el: "#app",
    data: {
      index: 0
    },
    computed: {
      notice() {return myTest[this.index]}
    },
    methods: {
          showFile(e) {
            console.log(' show file was clicked. ')
        }
  }
  });
  </code></pre>