`I am using vue3 with options api`

For the code posted below, I have a checkbox that when checked, the method onCheckboxGeoTIFFOverlayBandAveragesChanged() should be executed. Despite I check and uncheck the the checkbox several times, the log statement in onCheckboxGeoTIFFOverlayBandAveragesChanged
always displays that the valus of isCheckboxGeoTIFFOverlayBandAveragesChecked is false.

please let me know why that is happening and how to solve it

code:

<template>
    <cds-checkbox id="idCheckboxGeoTIFFOverlayBandAveragesContainer">
        <label id="idTextGeoTIFFOverlayBandAverages">{{ tempTextBandAverages }}</label>
        <input
            type="checkbox"
            :value="compPropsVModelCheckGeoTIFFOverlayBandAverages"
            @input="$emit('update:compPropsVModelCheckGeoTIFFOverlayBandAverages', $event.target.checked)"
            :disabled="isCheckboxGeoTIFFOverlayBandAveragesDisabled"
            :checked="isCheckboxGeoTIFFOverlayBandAveragesChecked"
            @change="onCheckboxGeoTIFFOverlayBandAveragesChanged"
        />
    </cds-checkbox>
</template>

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

let msg = null;

export default {
    name: 'SentinelHubGeoTIFFOverlayBand1',
    data() {
        return {
            tempTextBandAverages: GeoTIFFOverlaySettingsConstants.CONST_STRING_BAND_1_AVERAGES.description,
        };
    },
    components: {},
    props: {
        isCheckboxGeoTIFFOverlayBandAveragesChecked: {
            type: Boolean,
            default: false,
        },
        isCheckboxGeoTIFFOverlayBandAveragesDisabled: {
            type: Boolean,
            default: false,
        },
        vModelCheckGeoTIFFOverlayBandAverages: {
            type: Boolean,
            default: null,
        },
    },
    emits: {
        'update:vModelCheckGeoTIFFOverlayBandAverages': null,
    },
    computed: {
        compPropsVModelCheckGeoTIFFOverlayBandAverages: {
            get() {
                return this.vModelCheckGeoTIFFOverlayBandAverages;
            },
            set(value) {
                this.$emit('update:vModelCheckGeoTIFFOverlayBandAverages', value);
            },
        },
    },
    methods: {
        onCheckboxGeoTIFFOverlayBandAveragesChanged() {
            msg = JSON.stringify({msg:verboseTag + '@watch.', isChecked: this.isCheckboxGeoTIFFOverlayBandAveragesChecked});
            console.log(msg);
        },
    },
};
</script>