I am quite new to vueJs, and I am trying to create something like a tab menu.
I have a dropdown navbar, each link creates a new tab, and this new tab is a Vue component.

I am trying to put a `v-on:click` directive in the created tab, but it does not call the function. In fact I get errors like 

> 
> "Property or method "removeTab" is not defined on the instance but
>  referenced during render."
> 
> 
> 

and 

> 
> "removeTab is not a function."
> 
> 
> 

But `removeTab` is a function, and if I put the `v-on:click` in a static html tag it works. Am I doing something wrong, or is it impossible to have directives in dynamically loaded components?

Here is a simplified version of my code, just in order to show better what I am trying to explain. RemoveTab is just an alert, just to show when it works and when it does not.

HTML

```
<div  id="application">

  <button class="item" v-on:click="addTab()">Add Button</button>
  <button class="item" v-on:click="removeTab()">Remove</button>
  <br><br>

  <div >
    <tab v-for ="tab in tabs" :tab="tab"></tab>
  </div>
</div>

 <template id="tab-template">
   <button class="item">
     {{tab.nomeTab}} &nbsp; <div v-on:click="removeTab()">remove</div>
   </button>
</template>

```

JS

```
Vue.component('tab', {
  template: '#tab-template',
  props: ['tab']
});

new Vue({
  el: '#application',
  data:{
    newTab:'',
    tabs: [
      {nomeTab:'Home', contenutoTab:'ciao'},
    ]
  },
  methods:{
    addTab: function() {
      this.tabs.push({
        nomeTab: 'NewTab',
      });
    },

    removeTab: function () {
       alert("Here it works");
    }
  }
});

```

and here it is on [JSFiddle](https://jsfiddle.net/0ggv57ne/2/).

Thank you for your attention