willaengine/resources/js/Global/components/Inputs/Checkbox.vue

<template>
    <div class="WM-Checkbox c-toggle-hide RTL WM-Align-R">
        <input
            type="checkbox"
            :id="rand"
            class="c-check"
            :value="valueSelected"
            v-model="values"
            @change="changeValue"
        />
        <label :for="rand">
            <span class="inc"></span>
            <span class="check"></span>
            <span class="box"></span>
            {{ showText }}
        </label>
    </div>
</template>

<script>
export default {
    props: {
        itemValue: { default: null },
        itemText: { default: null },
        text: { default: " " },
        item: { default: {} },
        color: { default: "Red" },
        value: {type: Array},
    },
    data: function() {
        return {
            IconClass: "WMi-" + this.Icon,
            values: this.value,
            rand : Math.random()
        };
    },
    computed: {
        valueSelected() {
            if (this.itemValue) {
                return this.item[this.itemValue];
            }
            return this.item;
        },
        showText() {
            if (this.itemText) {
                return this.item[this.itemText];
            }
            return this.text;
        },
    },  
    methods:{
        changeValue($event) {
            if (this.value) {
                if ($event.target.checked) {
                    this.value.push(this.valueSelected);
                } else {
                    let index = this.value.findIndex(x => x == this.valueSelected);
                    this.value.splice(index, 1);
                }
            }
            this.$emit('change', this.ItemID, $event.target.checked);
        }
    },
    watch:{
        value(value) {
            this.values = value;
        }
    }
};
</script>