VueJS 3 custom Checkbox not changing UI when clicked

Question

I'm trying to create a custom checkbox with Vue 3 and the composition API following this example , but even when I can see on devtools that all my props and bound data are passing from the parent component to the child component the checkbox UI won't change when the checkbox is checked:

Parent Component:

<template>
    <div class="flex">
        <div class="flex">
            <span>Detected Language</span>
            <BaseCheckBox
                v-model:checked="translationOn"
                fieldId="translate"
                label="Translate"
                class="ml-4"
            />
        </div>
    </div>
</template>

<script>
    import BaseCheckBox from './BaseCheckBox.vue'
    import { ref } from 'vue'
    export default {
        setup() {
            const translationOn = ref(false)
            return {
                translationOn,
            }
        },
        components: { BaseCheckBox },
    }
</script>

Child Component:

<template>
    <div class="flex">
        <input
            @input="(event) => $emit('update:checked', event.target.checked)"
            type="checkbox"
            :checked="checked"
            :id="fieldId"
            class="mr-2 hidden"
        />
        <label
            :for="fieldId"
            class="flex flex-row items-center cursor-pointer select-none"
        >
            <i
                class="fa mr-1"
                :class="{
                    'fa-check-square text-blue-600': checked,
                    'fa-square border-2 border-gray-700 text-white': !checked,
                }"
            ></i>
            {{ label }}
        </label>
    </div>
</template>

<script>
export default {
    props: {
        label: String,
        fieldId: {
            type: String,
            required: true,
        },
        checked: {
            type: Boolean,
        },
    },
}
</script>

Whenever I click the checkbox I can see that the "translationOn" property on the parent change its value and the "checked" prop on the children change its value too but the font-awesome classes that are supposed to switch depending on that value don't:

    <i
        class="fa mr-1"
        :class="{
            'fa-check-square text-blue-600': checked,
            'fa-square border-2 border-gray-700 text-white': !checked,
        }"
    ></i>

The strange thing (at least for me) is that when I manually change the value in the code in this line of the parent component:

const translationOn = ref(true)

From "true" to "false" or viceversa it works but not when I click on the checkbox, even when I can see all the values behaving accordingly.

Will really appreciate any help! Thanks!

Answer 1

So found the answer to this problem here

For some reason the font-awesome classes are not reactive hence ignore the vue directive to conditional render the html. Find the answer (basically wrap the <i> tag within a <span> tag) on the link.