How can I use $dispatch() or $broadcast() on a radio button? I can't do something like this (because I cannot use v-on:click on a radio button):

HTML

 <div class=radio radio-primary>

     <label>

         <input type=radio name=intern id=intern value=intern 

                v-on:click=update v-model=selectedrole/>

             Showall

      </label>                          

</div>

JS

Vue.component('searchemployees', {

    template: '#searchemployees',

    data: function()

    {

        return {

            selectedrole: ''

        }

    },

    methods: {

        update: function()

        {

            this.$dispatch('selectedRole', this.selectedrole)

        }

    }

});



Vue.component('employees', {

    template: '#employees',

    props:['list'],

    data: function()

    {

        return {

            role: ''

        }

    },

    created() {

        this.list = JSON.parse(this.list);

    },

    events: {

        'selectedrole': function(role) {

            this.role = role

        }

    }

});

Because I can't use v-on:click on a radio button. How can I do this? (I need selectedrole in 2 components).

Some help please!