JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<div id="app">
<div class="group">
<div>Group1</div>
<label for="anone">None</label>
<input v-model="picked" name="a" id="anone" value="anone" type="radio">
<label for="a1">1</label>
<input v-model="picked" name="a" id="a1" value="a1" type="radio">
<label for="a2">2</label>
<input v-model="picked" name="a" id="a2" value="a2" type="radio">
</div>
<div class="group">
<div>Group2</div>
<label for="bnone">None</label>
<input v-model="picked" name="b" value="bnone" id="bnone" type="radio">
<label for="b1">1</label>
<input v-model="picked" name="b" value="b1" id="b1" type="radio">
<label for="b2">2</label>
<input v-model="picked" name="b" value="b2" id="b2" type="radio">
</div>
<div class="group">
<div>Group3</div>
<label for="cnone">None</label>
<input v-model="picked" name="c" value="cnone" id="cnone" type="radio">
<label for="c1">1</label>
<input v-model="picked" name="c" value="c1" id="c1" type="radio">
<label for="c2">2</label>
<input v-model="picked" name="c" value="c2" id="c2" type="radio">
</div>
{{ picked }}
</div>
CSS
.group {
padding: 16px;
border-bottom: 1px solid #ccc;
}
JavaScript
new Vue({
el: '#app',
data: {
picked: null,
}
})