JSFiddle - React, Tailwind, and code Playground

by Zaiste

HTML

<div id="app">
  <child-comp name="fruits" val="apple" v-model="picked">Apple</child-comp>
  <child-comp name="fruits" val="banana" v-model="picked">Banana</child-comp>
  <child-comp name="fruits" val="cherry" v-model="picked">Cherry</child-comp>
  <p>{{ picked }}</p>
</div>

JavaScript

Vue.component('child-comp',{
	props:['name', 'val'],
	template: `<div>
    <input type="radio" :name="name" :value="val" @input="sendToParent($event.target.value)">
    <slot></slot>
  </div>`,
  methods: {
  	sendToParent(val){
    	this.$emit('input', val);
    }
  }
});
new Vue({
	el: '#app',
  data: {
  	picked: '',
    message: 'Hello'
  }
});