Vue.js 复选框问题

有一个作为单独组件的订单，我在页面上使用了 2 次或更多，它有复选框。如果我点击label它并且在组件的另一个实例中，它也会被点击，如果我点击输入本身，那么一切都很好。我想制作一个自定义复选框，其中input隐藏它，您只需单击label，但它不适用于它。如何解决问题？

<template>
<form action="" @submit.prevent="formSubmit" class="order-form">
    <h2>Начать работу</h2>
    <div class="order-content">
        <div class="order-left">
            <div class="order__row">
                <label class="down" :for="'order_name_' + makeHash">Имя</label>
                <input :id="'order_name_' + makeHash" type="text" :name="'order_name_' + makeHash" v-model="orderName" required="required" maxlength="50">
            </div>
            <div class="order__row">
                <label class="down" :for="'order_tel_' + makeHash">Номер телефона</label>
                <input :id="'order_tel_' + makeHash" type="tel" :name="'order_tel_' + makeHash" v-model="orderTel" required="required" maxlength="15">
            </div>
            <div class="order__row">
                <label class="down" :for="'order_email_' + makeHash">Email</label>
                <input :id="'order_email_' + makeHash" type="email" :name="'order_email_' + makeHash" v-model="orderEmail" maxlength="40">
            </div>
        </div>
        <div class="order-center">

        </div>
        <div class="order-right">
            <div class="order-right-pick">
                Выберите услугу:
            </div>
            <ul class="">
                <li v-for="(feature, index) in features">
                    <input type="checkbox"
                           :value="feature"
                           :id="'cb-feature-'+index"
                           v-model="selection.features">
                    <label :for="'cb-feature-'+index">{{feature}}</label>
                </li>
            </ul>
        </div>
    </div>
    <div class="order__footer">
        <div class="border-btn-box pointer-large">
            <div class="border-btn-inner">
                <button :submit="true" class="border-btn" data-text="Отправить">Отправить</button>
            </div>
        </div>
    </div>
</form>

代码

import DOMPurify from 'dompurify';
import MaskedInput from 'vue-masked-input';
import swal from 'sweetalert';
import axios from 'axios';

export default {
    name: 'order',
    components: {
        MaskedInput
    },
    data: function(){
        return {
            orderName: '',
            orderEmail: '',
            orderTel: '',
            errs: [],
            token: '',
            chatId: '',

            features: ["Reactivity", "Encapsulation", "Data Binding"],
            selection: {
                features: []
            },
        };
    },
    methods: {
        formSubmit: function(){
            let name = this.orderNameCleaned;
            let tel = this.orderTelCleaned;
            let email = this.orderEmailCleaned;

            if(name.length > 0){
                this.removeError('name');
            } else {
                this.addError('name');
            }


            if(tel.length > 0){
                this.removeError('tel');
            } else {
                this.addError('tel');
            }

            if(this.checkErrors()){
                let msg =   '<b>Новая заявка от ' + name + '!</b>\n';
                msg +=  'Номер телефона: ' + tel + '.\n';
                msg +=  'Email: ' + email + '.\n';
                this.sendMsg(msg);

            } else {
                let msg = "";
                Array.prototype.forEach.call(this.errs, function(err){
                    if(err == 'name'){
                        msg += 'Поле имя не должно быть пустое. ';
                    }
                    if(err == 'tel'){
                        msg += 'Поле телефон не должно быть пустое. ';
                    }
                });
                this.showErrorAlert(msg);
            }
        },
        sanitize: function(s){
            return DOMPurify.sanitize(s).trim().replace(/\s+/g,' ').replace(/_/g, '');
        },
        checkError: function(err){
            return this.errs.indexOf(err);
        },
        addError: function(err){
            if(this.checkError(err) == -1){
                this.errs.push(err);
            }
        },
        removeError: function(err){
            if(this.checkError(err) != -1){
                this.errs.splice(this.checkError(err), 1);
            }
        },
        checkErrors: function(){
            if(this.errs.length == 0){
                return true;
            } else {
                return false;
            }
        },
        showErrorAlert: function(msg){
            swal("Ошибка", msg, "error");
            console.log(msg);
        },
        showSuccessAlert: function(){
            swal("Успешно!", "Ваша заявка принята и будет рассмотрена в ближайшее время.", "success");
            this.orderName = '';
            this.orderTel = '';
            this.orderEmail = '';
        },
        sendMsg: function(msg){
            let url = 'https://api.telegram.org/bot' + this.token + '/sendMessage?chat_id=' + this.chatId + '&text=' + encodeURI(msg) + '&parse_mode=html';
            let $this = this;

            axios.get(url).then((response) => {
                let ok = response.data.ok;
                if(ok){
                    $this.showSuccessAlert();
                } else {
                    $this.showErrorAlert('Случилась какая-то ошибка. Подождите немного и повторите еще раз.');
                }
            }).catch((error) => {
                console.log(error);
                $this.showErrorAlert('Случилась какая-то ошибка. Подождите немного и повторите еще раз.');
            });
        }
    },
    computed: {
        makeHash: function(){
            let hash = "";
            let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            for(let i = 0; i < 8; i++)
                hash += possible.charAt(Math.floor(Math.random() * possible.length));

            return hash;
        },
        orderNameCleaned: function(){
            return this.sanitize(this.orderName);
        },
        orderTelCleaned: function(){
            return this.sanitize(this.orderTel);
        },
        orderEmailCleaned: function(){
            return this.sanitize(this.orderEmail);
        },
    }
};