Radio Button puro em vuejs e tailwindcss (classe input-text é um conjunto add com ```@apply``` do tailwindcss)

index.html

<radio-button :checked="radio" name="teste" valor="1" label="teste 1" v-model="radio"></radio-button>

RadioButton.js

const RadioButton = {
  name: 'RadioButton',
  template: '<div>' +
    '<div class="input-text cursor-pointer flex h-10" @click="$emit(\'input\', valor)">' +
      '<div class="h-4 w-4  rounded-full border-2 border-green-700 m-auto" :class="newClass">' +
        '<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 fill-current text-white" v-if="checked == valor" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>' +
      '</div>' +
      '<div class="self-center flex-1 px-2 pb-1">{{label}}</div>' +
    '</div>',
  computed: {
    newClass() {
      return this.checked == this.valor ? ['bg-green-700'] : ['bg-white']
    }
  },
  props: {
    valor: {
      type: String,
      required: true
    },
    name: {
      type: String,
      required: true
    },
    label: {
      type: String,
      required: true
    },
    checked: '',
  }
}