i am using vue3 with options api

as shown in the below posted code, i have two radio buttons, the first one will invoke onShowGeoTIFFOverlayChanged and the second one will invoke onHideGeoTIFFOverlayChanged when pressed.
when i press the the first one, onShowGeoTIFFOverlayChanged gets called and consequently compPropsVModelShowGeoTIFFOverlayForTS1 gets called and the get() and set() gets called accordingly.
the problem is when i press the second button, it will result in calling onHideGeoTIFFOverlayChanged then the set() method gets called but the get() method never gets invoked.why

<template>
    <cds-radio id="idRadioBtnShowGeoTIFFOverlayForTS1Container">
        <label id="idTextOnGeoTIFFOverlayForTS1">{{ tempTextOn }}</label>
        <input
            type="radio"
            :value="compPropsVModelShowGeoTIFFOverlayForTS1"
            @input="$emit('update:compPropsVModelShowGeoTIFFOverlayForTS1', $event.target.value)"
            :disabled="isRadioButtonShowGeoTIFFOverlayForTS1Disabled"
            :checked="isCheckedRadioButtonShowGeoTIFFOverlayForTS1"
            @change="onShowGeoTIFFOverlayChanged()"
        />
    </cds-radio>

    <cds-radio id="idRadioBtnHideGeoTIFFOverlayForTS1Container">
        <label id="idTextOffGeoTIFFOverlayForTS1">{{ tempTextOff }}</label>
        <input
            type="radio"
            :value="compPropsVModelHideGeoTIFFOverlayForTS1"
            @input="$emit('update:compPropsVModelHideGeoTIFFOverlayForTS1', $event.target.value)"
            :disabled="isRadioButtonHideGeoTIFFOverlayForTS1Disabled"
            :checked="isCheckedRadioButtonHideGeoTIFFOverlayForTS1"
            @change="onHideGeoTIFFOverlayChanged()"
        />
    </cds-radio>
</template>

props: {
    vModelShowGeoTIFFOverlayForTS1: {
        type: Boolean,
        type: null,
    },
    vModelHideGeoTIFFOverlayForTS1: {
        type: Boolean,
        type: null,
    },
},
emits: {
    'update:vModelShowGeoTIFFOverlayForTS1': null,
    'update:vModelHideGeoTIFFOverlayForTS1': null,
},
computed: {
    compPropsVModelShowGeoTIFFOverlayForTS1: {
        get() {
            console.log('xcx get.compPropsVModelShowGeoTIFFOverlayForTS1:', this.vModelShowGeoTIFFOverlayForTS1);
            return this.vModelShowGeoTIFFOverlayForTS1;
        },
        set(value) {
            console.log('xcx set.compPropsVModelShowGeoTIFFOverlayForTS1:', value);
            this.$emit('update:vModelShowGeoTIFFOverlayForTS1', value);
        },
    },
    compPropsVModelHideGeoTIFFOverlayForTS1: {
        get() {
            console.log('xcx get.compPropsVModelHideGeoTIFFOverlayForTS1:', this.vModelHideGeoTIFFOverlayForTS1);
            return this.vModelHideGeoTIFFOverlayForTS1;
        },
        set(value) {
            console.log('xcx set.compPropsVModelHideGeoTIFFOverlayForTS1:', value);
            this.$emit('update:vModelHideGeoTIFFOverlayForTS1', value);
        },
    },
},
methods: {
    async onShowGeoTIFFOverlayChanged() {
        msg = JSON.stringify({msg:verboseTag + '@watch xcx onShowGeoTIFFOverlayChanged.'});
        console.log(msg);
        this.compPropsVModelShowGeoTIFFOverlayForTS1 = true;
        this.compPropsVModelHideGeoTIFFOverlayForTS1 = false;
    },
    async onHideGeoTIFFOverlayChanged() {
        msg = JSON.stringify({msg:verboseTag + '@watch xcx onHideGeoTIFFOverlayChanged.'});
        console.log(msg);
        this.compPropsVModelShowGeoTIFFOverlayForTS1 = false;
        this.compPropsVModelHideGeoTIFFOverlayForTS1 = true;
    },
}