in the code mentioned in vue-component section below, i create a component with two radio buttons.
what i want to achieve is, when the radio button in idRadioBtnShowGeoTIFFOverlayContainer is selected, then the radio button in idRadioBtnHideGeoTIFFOverlayContainer should be deselected.
in other words, if one radio button is selected then the other must be deselected and conversrly.

at the run time, when i select on radio button, then selected the other one, the formerly selected one does not get deselected

how to modify both of the methods onShowGeoTIFFOverlayChanged() and onHideGeoTIFFOverlayChanged() to achieve that please

vue-component

<template>
    <div id="idDivGeoTIFFOverlaySettingsRadioButtonMainLayoutContainer" v-show="isShowGeoTIFFOverlaySettingsRadioButtonMainLayoutContaine">
        <cds-radio id="idRadioBtnShowGeoTIFFOverlayContainer">
            <label id="idText">{{ 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="idRadioBtnHideGeoTIFFOverlayContainer">
            <label id="idText">{{ tempTextOff }}</label>
            <input
                type="radio"
                :value="compPropsVModelHideGeoTIFFOverlayForTS1"
                @input="$emit('update:compPropsVModelHideGeoTIFFOverlayForTS1', $event.target.value)"
                :disabled="isRadioButtonHideGeoTIFFOverlayForTS1Disabled"
                :checked="isCheckedRadioButtonHideGeoTIFFOverlayForTS1"
                @change="onHideGeoTIFFOverlayChanged()"
            />
        </cds-radio>
    </div>
</template>

<script>
import { GeoTIFFOverlaySettingsConstants } from '../../resources/GeoTIFFOverlaySettings/GeoTIFFOverlaySettingsConstants.js';

export default {
    name: 'GeoTIFFOverlaySettingsTS1RadioButtons',
    data() {
        return {
            tempTextOn: GeoTIFFOverlaySettingsConstants.CONST_STRING_ON.description,
            tempTextOff: GeoTIFFOverlaySettingsConstants.CONST_STRING_OFF.description,
        };
    },
    components: {},
    props: {
        isShowGeoTIFFOverlaySettingsRadioButtonMainLayoutContaine: {
            type: Boolean,
            default: true,
        },
        isCheckedRadioButtonShowGeoTIFFOverlayForTS1: {
            type: Boolean,
            default: null,
        },
        isCheckedRadioButtonHideGeoTIFFOverlayForTS1: {
            type: Boolean,
            default: null,
        },
        isRadioButtonShowGeoTIFFOverlayForTS1Disabled: {
            type: Boolean,
            default: true,
        },
        isRadioButtonHideGeoTIFFOverlayForTS1Disabled: {
            type: Boolean,
            default: true,
        },
        VModelShowGeoTIFFOverlayForTS1: {
            type: null,
        },
        VModelHideGeoTIFFOverlayForTS1: {
            type: null,
        },
    },
    emits: {
        'update:VModelShowGeoTIFFOverlayForTS1': null,
        'update:VModelHideGeoTIFFOverlayForTS1': null,
    },
    computed: {
        compPropsVModelShowGeoTIFFOverlayForTS1: {
            get() {
                return this.VModelShowGeoTIFFOverlayForTS1;
            },
            set(value) {
                this.$emit('update:VModelShowGeoTIFFOverlayForTS1', value);
            },
        },
        compPropsVModelHideGeoTIFFOverlayForTS1: {
            get() {
                console.log('get.compPropsVModelHideGeoTIFFOverlayForTS1:', this.VModelHideGeoTIFFOverlayForTS1);
                return this.VModelHideGeoTIFFOverlayForTS1;
            },
            set(value) {
                console.log('set.compPropsVModelHideGeoTIFFOverlayForTS1:', value);
                this.$emit('update:VModelHideGeoTIFFOverlayForTS1', value);
            },
        },
    },
    methods: {
        onShowGeoTIFFOverlayChanged() {
            this.compPropsVModelShowGeoTIFFOverlayForTS1 = true;
            this.compPropsVModelHideGeoTIFFOverlayForTS1 = false;
            this.isCheckedRadioButtonShowGeoTIFFOverlayForTS1 = true;
            this.isCheckedRadioButtonHideGeoTIFFOverlayForTS1 = false;
        },
        onHideGeoTIFFOverlayChanged() {
            this.compPropsVModelShowGeoTIFFOverlayForTS1 = false;
            this.compPropsVModelHideGeoTIFFOverlayForTS1 = true;
            this.isCheckedRadioButtonShowGeoTIFFOverlayForTS1 = false;
            this.isCheckedRadioButtonHideGeoTIFFOverlayForTS1 = true;
        },
    },
};
</script>

<style>
@import '../../../../map/assets/css/NDVIComparisonTab/RadioButtons/GeoTIFFOverlay/GeoTIFFOverlaySettingsTS1RadioButtons.css';
</style>