vue3 with options api

as shown in the code section below, i am creating a vue-component with drop-down list
what i want to achieve is, to introduce v-model to the drop-down list so that when the user selects one item from that list, i get notified about that and i should have access to it. In other words, in the parent component, i want to be able to do something
like this:

v-model:vModelSelectedGeometryOrder="vModelSelectedGeometryOrder"

what is wrong in the approach i introduced in the code below please

child:

<template>
    <div id="idDivGeometriesOrderLabelContainer">
        <label id="idLabelGeometriesOrder"> {{ tempTextGeometriesOrder }} </label>
    </div>
    <div id="idDivDropDownListContainer">
        <select name="" id="idGeoTIFFOverlaySettingsDropDownList" 
            :value="compPropsVModelSelectedGeometryOrder"
            @input="$emit('update:compPropsVModelSelectedGeometryOrder', $event.target.value)"
            :disabled="isOrdersDropDownListDisabled">
            <option value="" disabled>orders</option>
            <option v-for="geometryProps in geometriesProps" :key="geometryProps.get('DIGITIZED_FEATURE_PROPERTY_GEOJSON')">{{ geometryProps.get('DIGITIZED_FEATURE_PROPERTY_GEOM_ORDER') }}</option>
        </select>
    </div>
</template>

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

export default {
    name: 'GeoTIFFOverlaySettingsGeomsOrderDropDownList',
    data() {
        return {
            tempTextGeometriesOrder: GeoTIFFOverlaySettingsConstants.CONST_STRING_GEOMETRIES_ORDER_LABEL.description,
        };
    },
    components: {},
    props: {
        vModelSelectedGeometryOrder: {
            type: String,
            default: null,
        },
        isOrdersDropDownListDisabled: {
            type: Boolean,
            default: true,
        },
        geometriesProps: {
            type: Object,
            default: [],
        },
    },
    emits: {
        'update:vModelSelectedGeometryOrder': null,
    },
    computed: {
        compPropsVModelSelectedGeometryOrder: {
            get() {
                return this.vModelSelectedGeometryOrder;
            },
            set(value) {
                this.$emit('update:vModelSelectedGeometryOrder', value);
            },
        },
    },
    methods: {},
};
</script>

update

as an attempt to solve this problem, i introduced @change="onGeometryOrderSelected($event.target.value)" as shown below in the code. And i added the latter option to methods: {} object as follows:

 methods: {
    onGeometryOrderSelected(evt) {
        const msg = JSON.stringify({ msg: verboseTag + 'xcx onGeometryOrderSelected():', evt: evt });
        console.log(msg);
        this.compPropsVModelSelectedGeometryOrder = evt;
    },
},

at run time, when i select an item from the list, the method onGeometryOrderSelected() mentioned above is called, and consequently, the computed property compPropsVModelSelectedGeometryOrder gets called. In other words, the following set() of the computed
property gets called

computed: {
    compPropsVModelSelectedGeometryOrder: {
        get() {
            console.log('get.compPropsVModelSelectedGeometryOrder:', this.vModelSelectedGeometryOrder);
            return this.vModelSelectedGeometryOrder;
        },
        set(value) {
            console.log('set.compPropsVModelSelectedGeometryOrder:', value);
            this.$emit('update:vModelSelectedGeometryOrder', value);
        },
    },
},

but the problem still persists, because in the parent component, i bind on vModelSelectedGeometryOrder as follows:

v-model:vModelSelectedGeometryOrder="vModelSelectedGeometryOrder"
watch: {
    vModelSelectedGeometryOrder(newVal, oldVal) {
        let msg = JSON.stringify({msg: verboseTag + '@watch vModelSelectedGeometryOrder', newVal: newVal, oldVal: oldVal});
        console.log(msg);
    },
}

but the log statement in the watcher of vModelSelectedGeometryOrder in the parent never gets executed.
why that is happening please