How to set one checkbox instance of component to false, when another instance is set to true?

How can I create a checkbox component in vue.js, lets say (HTML representation):

<v-switch></v-switch>
<v-switch></v-switch>

So when I create two checkboxes like this I want to change the other one to false if the first one is set to true, and and vice versa. Also they both can be false at the same time.

(I am new with vue.js,I just want to add this in a existing environment).

Code that exists

    Vue.component('v-switch', {
    props: ['value', 'disabled', 'color'],
    template: `
        <div class="switch">
            <label>
                <input type="checkbox" :disabled="disabled" @change="emitChange()" v-model="data">
                <span class="lever" :class="color_class"></span>
            </label>
        </div>`,
    data: function () {
        return {
            data: this.value || '',
            color_class: 'switch-col-' + (this.color || 'green')
        };
    },
    methods: {
        emitChange: function () {
            var vm = this;
            setTimeout(function () {
                vm.$emit('change', vm.data);
            });
        }
    },
    watch: {
        data: function () {
            this.$emit('input', this.data);
        },
        value: function () {
            this.data = this.value;
        }
    },
    mounted: function () {
        //this.data = this.value;
    }
});

and the HTML:

 <v-input-wrap translate="newsletter" class="col-sm-1 col-12">
 <v-switch v-model="contact_persons[index].newsletter"></v-switch>
 </v-input-wrap>
<v-input-wrap translate="blacklist" class="col-sm-1 col-12">
 <v-switch v-model="contact_persons[index].blacklist"></v-switch>
 </v-input-wrap>