Vue.JS custom radio button component requires clicking twice

radio-button vue.js vuejs2 vue-component

Not exactly sure what's causing that bug, but I see that you're doing some unnecessary data-binding that are apparently causing the issue.

Change the radio component template to this (don't need to pass a value or bind a v-model):
<div><input :name="name" type="radio" @change="update"><slot></slot></div>
Get rid of the val data property (since it isn't being used now).
Change your update method to this.$emit('change', this.value); (you can just directly reference the value you've assigned this radio component).

CodeHunter