<template>
        <div class='wrapper'>
 <input type="checkbox" :checked="inputSelect" @change="changeSelect" id='checkLabel'>
  <label for="checkLabel"></label>
</div>
</template>
<style scoped>
.wrapper {
    display: inline-block;
}
.wrapper input{
  display:none;
}
.wrapper label{
   position: relative;
  background:grey;
  cursor:pointer;
   width: 50px;
   height: 24px;
   border-radius: 100px;
   display:block;
}
.wrapper label::before {
  content:'';
   position: absolute;
/*   display:block; */
  width:24px;
  height:24px;
  border-radius: 24px;
  background:white;
  transition: all 0.36s;
  top:0px;
  left:0px;
}
.wrapper input:checked + label {
  background:#66D344;
}
.wrapper input:checked + label::before {
  left: calc(100%);
      transform: translateX(-100%);
  transition: all .36s cubic-bezier(.78, .14, .15, .86);
}
</style>
<script>
export default {
    props: {
        value: {
            default: false
        }
    },
    data() {
        return {
           inputSelect: false 
        }
    },
    watch: {
        value: function() {
          console.log('switch change', this.value)
            this.inputSelect = this.value
        }
    },
    methods: {
        changeSelect() {
            this.inputSelect = !this.inputSelect
            console.log('changeSelect', this.inputSelect, this.value)
            this.$emit('input', this.inputSelect)
        }
    }
}
</script>