JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/vue"></script>
<div id="app">
{{message}} - {{sex}}
<radio value="m" v-model="sex" name="sex">Male</radio>
<radio value="f" v-model="sex" name="sex">Female</radio>
</div>
<template id="tmpz">vvv</template>
JavaScript
Vue.component('radio', {
model : {
prop:'checked'
,event:'change'
}
,props : {
value:null
,name:String
}
,data : () => ({
val:''
})
,methods : {
update (e) {
this.$emit('change',e.target.value);
}
}
,template:'<div><input :value="value" :name="name" type="radio" v-model="val" @change="update"><slot></slot></div>'
})
var app = new Vue({
el: '#app'
,data: {
message: 'selected:'
,sex:''
}
})