faire apparaitre un texte ou non en fonction de mon choix de checkbox

Bonjour à tous, j'utilise dans ma vue parente un component Checkbox que j'ai créée sous inertiajs. on a donc deux checkbox une pour yes et une pour no. si on a cliqué sur yes (et enregistré dans mon formulaire) on voit un texte apparaitre. Par contre si après on veut cliquer sur no le texte ne devrait plus apparaitre mais sans cliquer sur save il reste toujours visible mon fameux texte. Quelqu'un de calé en inertiajs pourrait me donner un peu d'aide svp ??

Voici mon code de ma checkbox:

<template>
    <div class="tw-flex tw-items-center tw-gap-4">
        <label>
            <slot>
                <span
                    v-if="textBefore"
                    class="tw-text-md tw-font-medium"
                    :class="[!value && 'tw-text-slate-300']"
                >
                    {{ textBefore }}
                </span>
            </slot>
            <input
                type="checkbox"
                v-model="yesChecked"
                :id="checkboxId"
                :name="checkboxName"
                :checked="yesChecked"
                @change="updateSelection('yes', yesChecked)"
                :value="yesChecked ? true : false"
                class="tw-h-6 tw-w-6 tw-cursor-pointer tw-rounded-lg tw-border-2 tw-border-gray-300 tw-transition-colors tw-duration-200 tw-ease-in-out focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-indigo-600 focus:tw-ring-offset-2"
            />
            <span
                class="tw-text-md tw-font-medium"
                :class="[!yesChecked && 'tw-text-slate-300']"
            >
                Yes
            </span>
        </label>
        <label>
            <input
                type="checkbox"
                v-model="noChecked"
                @change="updateSelection('no', noChecked)"
                :value="noChecked ? true : false"
                class="tw-h-6 tw-w-6 tw-cursor-pointer tw-rounded-lg tw-border-2 tw-border-gray-300 tw-transition-colors tw-duration-200 tw-ease-in-out focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-indigo-600 focus:tw-ring-offset-2"
            />
            <span
                class="tw-text-md tw-font-medium"
                :class="[!noChecked && 'tw-text-slate-300']"
            >
                No
            </span>
        </label>
    </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const props = defineProps({
    modelValue: { type: Boolean },
    textBefore: String,
    checkboxId: String,
    checkboxName: String,
    initialValue: { type: Boolean },
});

const yesChecked = ref(props.initialValue);
const noChecked = ref(!props.initialValue);

const emit = defineEmits(['update:modelValue', 'selectionChanged']);

const updateSelection = (option, checked) => {
    if (option === 'yes' && checked) {
        noChecked.value = false;
    } else if (option === 'no' && checked) {
        yesChecked.value = false;
    }
    emit('update:modelValue', yesChecked.value);
    emit('selectionChanged', yesChecked.value);
};

watchEffect(() => {
    yesChecked.value = props.initialValue;
    noChecked.value = !props.initialValue;
});

// output the selected value when it changes
emit('update:modelValue', yesChecked.value);
</script>

et voici le bout de code où j'utilise ma checkbox:

 <td class="tw-break-all tw-px-6 tw-py-4">
                <CheckBox
                    class="regime"
                    :checkboxId="'regime' + item.item.id"
                    :checkboxName="'regime' + item.item.id"
                    :update:modelValue="
                        containsSession(item.item.id, session)
                    "
                    @selection-changed="
                        changeSession(item.item.id, $event)
                    "
                    :session="session"
                    :initialValue="containsSessionRegime(item.item.id, session)"
                    @changeCheckbox="changeCheckBox(item.item.id)"
                />
            </td>

Ce que je veux

je veux que si on clique sur yes le texte apparait, si on clique sur non le texte disparait

Ce que j'obtiens

quand je clique sur non le texte apparait toujours. Je ne sais pas comment m'y prendre. Et au passage si vous auriez d'excellentes sources de formations avec inertiajs laravel et vue ?? Parce que je me sens un peu larguée avec ces technologies, javascript n'étant pas ma spécialité à la base.