Checkbox com vue and tailwindcss

Checkbox.js

const Checkbox = {
  name: 'Checkbox',
  template: '<div>' +
    '<div class="input-text cursor-pointer flex h-10" @click="emit">' +
    '<div class="h-4 w-4  rounded 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" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></svg>' +
    '</div>' +
    '<div class="self-center flex-1 px-1 pb-1" v-html="label"></div>' +
    '</div>' +
    '</div>',
  data() {
    return {
      checked: false
    }
  },
  computed: {
    newClass() {
      return this.checked ? ['bg-green-700'] : ['bg-white']
    }
  },
  props: {
    label: {
      type: String,
      required: true
    }
  },
  methods:{
    emit(){
      this.checked = !this.checked
      this.$emit('input', this.checked)
    }
  }
}