Disabled property is not updating properly in v-select

Question

I have problem with the disabled property of a v-select item. I have found some solutions for such problems like using a watcher or computed method, however, I am not able to do so (or I do not know how exactly). Here is my code (EDITED):

<template>
    <v-card class="design-card border-radius-10px" width="25%">
        <v-tabs-items v-model="tab">
            ...
            <v-tab-item :value="'tab-2'">
                <v-card flat height="10vh">
                    <v-card-text>
                        <v-checkbox
                            v-model="showConditions"
                            :label="'Show conditions'"
                            hide-details
                            @change="changeShowConditions()"
                        />
                    </v-card-text>
                </v-card>
                
                <v-card>
                    <div v-for="(condition, i) in conditions" :key="i" class="conditions-container">
                        ...
                        <v-card-text class="pb-0">
                            ...
                            <v-row>
                                <v-col cols="7" class="pt-0">
                                    <v-select
                                        :ref="`goTo${i}`"
                                        v-model="condition.goTo"
                                        class="border-radius-10px"
                                        :items="allItems"
                                        :rules="checkSelfId(condition.selectedCondition._id)"
                                        :disabled="condition.disableSelection"
                                        :no-data-text="$t('noDataAvailable')"
                                        item-text="name"
                                        item-value="_id"
                                        solo
                                        @change="changeGoTo()"
                                    >
                                        <template v-slot:[`item`]="{ item }">
                                            {{ getNameInLocale(item) }}
                                        </template>

                                        <template #selection="{ item }">
                                            <div class="ml-1">
                                                <go-to-type
                                                    :value="item.type"
                                                    :show-label="false"
                                                    :show-as-button="true"
                                                    :button-label="`${getSelectedIndex(item)}.`"
                                                />
                                            </div>
                                        </template>
                                    </v-select>
                                </v-col>

                                <v-col cols="5" class="pt-0">
                                    <v-checkbox
                                        v-model="condition.disableSelection"
                                        class="text-sm-caption"
                                        label="Disable condition selection"
                                        hide-details
                                        dense
                                        @change="changeDisableCondition($event, i)"
                                    />
                                </v-col>
                            </v-row>
                        </v-card-text>
                    </div>
                </v-card>
            </v-tab-item>
        </v-tabs-items>
    </v-card>
</template>

<script>
    export default {
        name: 'ComponentName',
        data() {
            return {
                ...
                showConditions: false,
                conditions: []
            }
        },
        methods: {
            changeShowConditions() {
                if (showConditions)
                    this.generateInitialConditions()
                else
                    conditions: []
            },
            generateInitialConditions() {
                this.conditions = [
                    {
                        conditionQuestion: { ...this.selectedCondition[0] },
                        goTo: 'next'
                        disableSelection: false
                    }
                ]
            }
        }
    }
</script>

Since the conditions is an array of objects, I was not able to set a watcher. Additionally, the computed methods are not an option, too, because I do not know which condition of all I want to disable, thus, I need to pass somewhere the index. I made a method changeDisableCondition where I manually set the disabled property of the element by its reference 'goTo${i}', but it throws an error for mutating problems. I also tried to add deep watcher, but it looks like when the checkbox changes the condition.disableSelection, it does not take effect immediately as an event . The strange thing is that if I do console.log(conditions[i].disableSelection) in the changeDisableCondition method, it properly shows the correct boolean value. Whenever I update something on the page, it will use the new boolean value.

UPDATE:

Current (temporary) solution that I've found is just to initialize an empty object in the array, thus, the property becomes reactive as expected. Here is the code:

<script>
    export default {
        name: 'ComponentName',
        data() {
            return {
                ...
                showConditions: false,
                conditions: []
            }
        },
        created() {
            //* Add empty object to activate the reactivity
            //* PS. This can be moved as a method, but keep it here for the example
            this.conditions = [
                {
                    conditionQuestion: {},
                    goTo: 'next',
                    disableSelection: false
                }
            ]
        },
        methods: {
            changeShowConditions() {
                if (showConditions)
                    this.generateInitialConditions()
                else
                    conditions: []
            },
            generateInitialConditions() {
                this.conditions = [
                    {
                        conditionQuestion: { ...this.selectedCondition[0] },
                        goTo: 'next'
                        disableSelection: false
                    }
                ]
            }
        }
    }
</script>