Разный id в компоненте b-form-checkbox (Nuxt js + Bootstrap Vue)

Есть главная страница, в ней лежит компонент формы с id="123":

index.vue

<template>
    <b-container class="bg-white" fluid>
        <common-data
                @reset="commonDataResetHandler"
                @submit="commonDataSubmitHandler"
                id="123" 
                :model.sync="forms.commonData.model"
        />
    </b-container>
</template>

В самом компоненте формы есть вот такой чекбокс, у которого генерируется id:

commonData.vue

<b-form-checkbox
        :id="`${generateId}__host-is-participant`"
        v-model="commonData.model.host.value.isParticipant"
>
        {{commonData.model.host.label.isParticipant}}
</b-form-checkbox>

generateId это не что иное, как геттер:

private get generateId(): string {
        //Если свойство id не было задано, то idCast генерируется с помощью uuidv4()
        this.idCast = (this.idCast) ? this.idCast : uuidv4();
        return `common-data-${this.idCast}`;
}

idCast это переменная, которая принимает значение свойства id:

@Prop() private id: string;
private idCast: string = this.id;

Запускаем... И вот что видим:

Ура! Одинаковый id и for (как и ожидалось). Но стоит мне убрать "захардкоженый" id="123" (дав переменной idCast сгенерироваться), то вот что получается:

Везде id как id, а в чекбоксе (в for) - другой... В чём может быть причина?

P.S. Я пробовал выводить в консоль generateId - результат везде одинаковый. Также в computed видно, что он такой, как во всех остальных элементах формы: