Добавьте класс 'Show' в 'btn-group', когда внутри него установлен флажок, используя VUE

Question

Я на 100% новичок в vue, и я не могу понять, как это сделать.

У меня есть btn-group, в котором есть checkboxes, как показано в HTML ниже.

<div class="col-12 col-sm-3">
    <label class="w-100 mb-0" for="orderStatusListDiv">Order status</label>
    <div id="orderStatusListDiv" class="btn-group w-100" role="group">
        <button id="orderStatusList" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false" style="border: 1px solid #ced4da; text-align: left">
        Order status filter
        <span class="caret" style="margin-left: 120px"></span>
    </button>

    <div class="dropdown-menu dropdownCheckBox">                                         
        <div id="orderStatusCheckboxDiv" class="custom-control custom-checkbox dropdownCheckBoxDiv">
            <input id="orderStatusSelectUnselectCheckbox" type="checkbox" class="custom-control-input" v-model="osSelectAll">
            <label id="orderStatusSelectUnselectCheckboxLabel" for="orderStatusSelectUnselectCheckbox" class="custom-control-label">
                {{ osSelectAllLabel }}
            </label>
        </div>
        <div v-for="osCheckbox in osCheckboxes" class="custom-control custom-checkbox dropdownCheckBoxDiv">
            <input type="checkbox" class="custom-control-input" v-model="osSelected" :value="osCheckbox.id">
            <label class="custom-control-label" style="font-weight: normal">
                {{ osCheckbox.name }}
            </label>
        </div>
    </div>
</div>

DEV Инструменты Сгенерировано HTML

<div data-v-5de224cd="" class="dropdown-menu dropdownCheckBox show" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 34px, 0px);">
    <div data-v-5de224cd="" id="orderStatusCheckboxDiv" class="custom-control custom-checkbox dropdownCheckBoxDiv">
        <input data-v-5de224cd="" id="orderStatusSelectUnselectCheckbox" type="checkbox" class="custom-control-input">
        <label data-v-5de224cd="" id="orderStatusSelectUnselectCheckboxLabel" for="orderStatusSelectUnselectCheckbox" class="custom-control-label">
            Unselect all
        </label>
    </div>
    <div data-v-5de224cd="" class="custom-control custom-checkbox dropdownCheckBoxDiv">
        <input data-v-5de224cd="" type="checkbox" class="custom-control-input" value="awaitingDespatch">
        <label data-v-5de224cd="" class="custom-control-label" style="font-weight: normal;">
            Awaiting - Despatch
        </label>
    </div>
    <div data-v-5de224cd="" class="custom-control custom-checkbox dropdownCheckBoxDiv">
        <input data-v-5de224cd="" type="checkbox" class="custom-control-input" value="awaitingStock">
        <label data-v-5de224cd="" class="custom-control-label" style="font-weight: normal;">
            Awaiting - Stock
        </label>
    </div>
    <div data-v-5de224cd="" class="custom-control custom-checkbox dropdownCheckBoxDiv">
        <input data-v-5de224cd="" type="checkbox" class="custom-control-input" value="cancelledPostOrder">
        <label data-v-5de224cd="" class="custom-control-label" style="font-weight: normal;">
            Cancelled - Post-order
        </label>
    </div>
    <div data-v-5de224cd="" class="custom-control custom-checkbox dropdownCheckBoxDiv">
        <input data-v-5de224cd="" type="checkbox" class="custom-control-input" value="cancelledPreOrder">
        <label data-v-5de224cd="" class="custom-control-label" style="font-weight: normal;">
            Cancelled - Pre-order
        </label>
    </div>
    <div data-v-5de224cd="" class="custom-control custom-checkbox dropdownCheckBoxDiv">
        <input data-v-5de224cd="" type="checkbox" class="custom-control-input" value="completed">
        <label data-v-5de224cd="" class="custom-control-label" style="font-weight: normal;">
            Completed
        </label>
    </div>
    <div data-v-5de224cd="" class="custom-control custom-checkbox dropdownCheckBoxDiv">
        <input data-v-5de224cd="" type="checkbox" class="custom-control-input" value="created">
        <label data-v-5de224cd="" class="custom-control-label" style="font-weight: normal;">
            Created
        </label>
    </div>
    <div data-v-5de224cd="" class="custom-control custom-checkbox dropdownCheckBoxDiv">
        <input data-v-5de224cd="" type="checkbox" class="custom-control-input" value="fullyInvoiced">
        <label data-v-5de224cd="" class="custom-control-label" style="font-weight: normal;">
            Fully invoiced
        </label>
    </div>
    <div data-v-5de224cd="" class="custom-control custom-checkbox dropdownCheckBoxDiv">
        <input data-v-5de224cd="" type="checkbox" class="custom-control-input" value="orderError">
        <label data-v-5de224cd="" class="custom-control-label" style="font-weight: normal;">
            Order error
        </label>
    </div>
    <div data-v-5de224cd="" class="custom-control custom-checkbox dropdownCheckBoxDiv">
        <input data-v-5de224cd="" type="checkbox" class="custom-control-input" value="ShippedMoreThanOne">
        <label data-v-5de224cd="" class="custom-control-label" style="font-weight: normal;">
            Shipped - More than one delivery
        </label>
    </div>
    <div data-v-5de224cd="" class="custom-control custom-checkbox dropdownCheckBoxDiv">
        <input data-v-5de224cd="" type="checkbox" class="custom-control-input" value="ShippedPart">
        <label data-v-5de224cd="" class="custom-control-label" style="font-weight: normal;">
            Shipped - Part
        </label>
    </div>
</div>

Я знаю, что когда вы нажимаете наbtn-group show class добавляется к родителю, в моем случае

<div class="dropdown-menu dropdownCheckBox">

Проблема, которую я не могу решить, заключается в том, что когда я нажимаю на ниже

<div class="custom-control custom-checkbox dropdownCheckBoxDiv">

он закрывается, и я хочу, чтобы он оставался открытым, но я понятия не имею, как это сделать, и я не могу найти подходящего решения.

Это мой код

<script>
    import TestPagefrom './TestPage.vue';
    import * as params from './../params';

    export default {
        name: 'TestPage',

        components: {
            appTestPage: TestPage
        },

        data() {
            return {
                osSelectAllLabel: 'Select all',
                osCheckboxes: [
                    { id: "awaitingDespatch", name: "Awaiting - Despatch" }, 
                    { id: "awaitingStock", name: "Awaiting - Stock" }, 
                    { id: "cancelledPostOrder", name: "Cancelled - Post-order" }, 
                    { id: "cancelledPreOrder", name: "Cancelled - Pre-order" }, 
                    { id: "completed", name: "Completed" },
                    { id: "created", name: "Created" },
                    { id: "fullyInvoiced", name: "Fully invoiced" },
                    { id: "orderError", name: "Order error" },
                    { id: "ShippedMoreThanOne", name: "Shipped - More than one delivery" },
                    { id: "ShippedPart", name: "Shipped - Part" }
                ],
                osSelected: [],

                loading: true,
            }
        },

        computed: {
            vat() {
                return params.VAT * 100;
            },

            productOrders() {
                return this.$store.getters.orderPaginator.items;
            },

            osSelectAll: {
                get: function () {
                    return this.osCheckboxes ? this.osSelected.length == this.osCheckboxes.length : false;
                },

                set: function (osValue) {
                    var osSelected = [];
                    var osSelectAllLabel = 'Select all';

                    if (osValue) {
                        var osSelectAllLabel = 'Unselect all';
                        this.osSelectAllLabel = osSelectAllLabel;

                        this.osCheckboxes.forEach(function (osCheckbox) {
                            osSelected.push(osCheckbox.id);
                        });
                    }

                    this.osSelected = osSelected;
                    this.osSelectAllLabel = osSelectAllLabel;
                }
            }
        },

        created() {
            this.osSelectAll = true;

            // Fetch orders with basic filter
            this.searchProductOrders({});
        },

        mounted() {
            // Required for when page already previously loaded
            if (this.$store.getters.orderPaginator.items.length > 0) {
                this.loading = false;
                this.$refs.searchField.focus();
            }
        },

        methods: {
            searchProductOrders(filters) {
                axios.post('/product-orders/search', filters)
                    .then((response) => {
                        this.loading = false;
                        this.$refs.searchField.focus();

                        let paginator = response.data.paginator;

                        this.$store.dispatch('paginateOrders', paginator);
                        this.$store.dispatch('setOrderPaginator', paginator);
                    })
                    .catch((error) => { });
            }
        }
    }
</script>