Presento el siguiente div el cual muestra un input con su label, el problema presenta es que no me deja hacer clic en los checkbox.
Este código es sólo un ejemplo de uso del checkbox de boostrap 5 que estoy usando en VueJs.
<ul class="widget-list widget-filter-list list-unstyled pt-1" style="max-height: 11rem;"
data-simplebar data-simplebar-auto-hide="false">
<li v-for="(brand, index) in brands" :key="index"
class="widget-filter-item d-flex justify-content-between align-items-center mb-1">
<div class="form-check">
<input @click="handleBrands(brand.id)"
class="form-check-input"
type="checkbox"
value=""
:id="index"
>
<label class="form-check-label widget-filter-item-text" :for="index">
{{ brand.brand }}
</label>
</div>
</li>
</ul>
Incluso utilizo el DOM para saber si se esta marcando el checkbox pero este aun no me lo muestra:
const brs = document.getElementById('index');
console.log(brs);