vuejs-semantic-checkbox

Checkbox.vue

<template lang="pug">
  .ui.checkbox
    input(ref='input', type='checkbox')
    label
      slot
</template>

<script>
  export default {
    props: ['value'],
    data () {
      return {
        holdEvent: false
      }
    },
    mounted () {
      this.$nextTick(() => {
        $(this.$el).checkbox(this.value && 'check' || 'uncheck')
        this.$nextTick(() => {
          $(this.$el)
            .checkbox({
              onChecked: () => {
                if (this.holdEvent) return
                this.$emit('input', true)
                this.$emit('change')
              },
              onUnchecked: () => {
                if (this.holdEvent) return
                this.$emit('input', false)
                this.$emit('change')
              }
            })
        })
      })
    },
    destroyed () {
      $(this.$el).off()
    },
    watch: {
      value (value) {
        this.holdEvent = true
        $(this.$el).checkbox(value && 'check' || 'uncheck')
        this.$nextTick(() => {
          this.holdEvent = false
        })
      }
    }
  }
</script>