Пользовательский выбор MULTI-SELECT, при выборе и отмене выбора All, отображает неверный результат

Question

Я использую Laravel и Vue. js для записи компонента. Я создал пользовательский выбор с флажками. Один из параметров называется «Все», который, если установлен флажок, должен выбирать и отключать все остальные параметры. Отменив выбор «Все», я хочу отменить выбор и снова включить все параметры. Мой код стал очень грязным. Сначала шаблон:

<template>
    <div class="card shadow-sm">
        <div class="card-body">

             <!-- Label And Select For Supplier Type -->

             <label for="supplier_type" class="open-sans small">SUPPLIER TYPE:</label>
            <div>
                <div class="selectBox">
                    <select class="custom-select custom-select-sm">
                        <option></option>
                    </select>                  
                    <div class="overSelect"></div>
                    <div class="open-sans checkboxes p-2" :class="{ 'openCheckboxes': openSupplierType }">
                        <label for="All">
                            <input v-model="selectedSupplier" @change="isSelectedSupplierTypeOnlyOptionAll" type="checkbox" id="All" name="All" value="All" /> All
                        </label>
                        <template v-if="! supplierTypeDisabled">
                            <label v-for="type in selectedSupplierType" :key="type" :for="type">
                                <input v-model="selectedSupplier" @change="isSelectedSupplierTypeOnlyOptionAll" type="checkbox" :id="type" :name="type" :value="type" /> {{ type }}
                            </label>
                        </template>
                        <template v-else>
                            <label v-for="type in selectedSupplierType" :key="type" :for="type">
                                <input :disabled="supplierTypeDisabled ? true : false" v-model="selectedSupplier" @change="isSelectedSupplierTypeOnlyOptionAll" type="checkbox" :id="type" :name="type" :value="type" /> {{ type }}
                            </label>
                        </template>
                    </div>
                </div>               
            </div>

            <!-- End Label And Select For Supplier Type -->
        </div>
    </div>
</template>

Далее скрипт:

<script>

export default {

    data() {
        return {
            openSupplierType: false,
            supplierTypeDisabled: false,
            selectedSupplier: [],
            selectedSupplierType: [],
            csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    },

    mounted() {
        this.getSelectedSupplierType();
    },

    created() {
        window.addEventListener("click", this.close);
    },

    beforeDestroy() {
        window.removeEventListener("click", this.close);
    },

    methods: {

        getSelectedSupplierType: function () {
            axios.get('/api/get-selected-supplier-type').then(response => {
                this.selectedSupplierType = response.data.supplierTypes;
            }, response => {
                console.log(this.selectedSupplierType);
            });
        },

        isSelectedSupplierTypeOnlyOptionAll: function () {
            if(this.selectedSupplier.includes("All") || (this.selectedSupplier.length > 4 && !this.selectedSupplier.includes("All")))
            {
                this.selectedSupplier = ["All", "Wholesalers", "Dropshippers", "Liquidators", "Manufacturers"];     

                //disable all other supplier type inputs until "All" is deleselected
                this.supplierTypeDisabled = true;
            }else if((this.selectedSupplier.length == 4 && !this.selectedSupplier.includes("All")))
            {
                this.selectedSupplier = ["Wholesalers", "Dropshippers", "Liquidators", "Manufacturers"];
                this.supplierTypeDisabled = false;
            }else{
                this.supplierTypeDisabled = false;
            }
        },

        toggle() {
            this.openSupplierType = !this.openSupplierType;
        },

        close(e) {
            if (!this.$el.contains(e.target)) {
                this.openSupplierType = false;
            }else{
                this.openSupplierType = true;
            }
        }

    }

}

</script>

And finally the styling:

<style scoped>
.selectBox {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
 }

.selectBox select {
    width: 100%;
}

.overSelect {
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.checkboxes {
    display: none;
    border: 1px #dadada solid;
}

.openCheckboxes {
    display: block;
    position: absolute;
    width: 100%;
    z-index: 999999;
    background-color: #ffffff;
}

.checkboxes label {
    display: block;
}

.checkboxes label:hover {
    background-color: #efefef;
}
</style>

В тот момент, когда я выбираю «Все», он работает, но когда я отменяю выбор «Все», все другие опции все еще выбраны.