JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
  <gender-selection id="2" v-model="sex"></gender-selection>
  RANDOM CONTENT ...
  <gender-selection v-model="sex"></gender-selection>
</div>

JavaScript

Vue.component('gender-selection', {
  template: `
	<div>
    <template v-for="s in sexes">
      <input type="radio" :value="s" v-model="interface">
      <label :for="s">{{ s }}</label>
      <br>
    </template>
    <span>Your are a: <b>{{ interface }}</b></span>
  </div>
  `,
  props:['value'],
  data() {
    return {
    	sexes: ['male', 'female'],
    }
  },
  computed:{
  	interface:{
    	get(){
      	return this.value
      },
      set(val){
      	this.$emit('input', val)
      }
    }
  }
})

var app = new Vue({
	el: '#app',
  data(){
  	return {
    }
  }
})