I have to click twice on ion-checkbox to check - Ionic-vue 5

Ionic Framework Ionic Vue
1

I have a v-for inside an ion-modal where when you click a checkboxs item it adds the item object to an Array via Vuex, the Object it adds normal to the Array but i have to click twice to see the ion-checkbox change as ‘checked’ visually, my code:

    
                    <ion-radio-group>
                        <ion-item-sliding v-for="metaItem in this.metaList" :key="metaItem.id" :disabled="selectMode">
                            <ion-item button @click="(!selectMode?this.metaId = metaItem.id:false)">
                                <ion-checkbox 
                                    v-if="selectMode"
                                    @click="this['modals/metadata/selectMeta'](metaItem.id)" 
                                    :checked="this.selectedMeta.findIndex(sm => sm.id === metaItem.id) >= 0 ? true : false" 
                                    color="primary" slot="start"> </ion-checkbox>
                                <ion-label>{{ metaItem.nombre }}</ion-label>
                            </ion-item>
                            <ion-item-options side="end" v-if="metaItem._default == 1 ? false : true">
                                <ion-item-option color="danger" button @click="deleteMetadata($event, metaItem.id)" :disabled="selectMode">Eliminar</ion-item-option>
                            </ion-item-options>
                        </ion-item-sliding>
                    </ion-radio-group>

Vuexs mutator code (it adds or remove the object depending if is in the Array):


    
    selectMeta: (state: any, metaId: any) => {
        console.log(state.selectedMeta)
        const _i = state.selectedMeta.findIndex((sm: any) => sm.id === metaId)
        if( _i >= 0 )
            state.selectedMeta.splice(_i, 1)
        else
            state.selectedMeta.push(state.metaList[state.metaList.findIndex((m: any) => m.id === metaId)])
    }

Once its added to the array but not checked visually, I close the modal and then open it again and the items shows checked but i have to click again on them twice to toggle the checkbox visually.

What is the best way to resolve this? i’ve read i have to add a v-model but since the items are loaded the first time from an Api I dont know how to bind them.

Thanks!.

2

You should use @ionChange instead on @click