vue3 with options api

as shown in the below posted code, the child component has a drop-down list as shown in the code in section child. This child component is hosted in parent-1 and parent-2, and parent-1 is hosted in parent-2 as well

My question is, since child components is hosted in parent-1 and parent-2, does that granties if the value of vModelSelectedGeometryOrder
changed and for example,set to value 10 in parent-2, then that value which is 10 must be reported or echos in child component somehow? is that true? if not true, then how the two binging shoudl work?

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"
        @change="onGeometryOrderSelected($event.target.value)">
        <option value="" disabled>orders</option>
        <option v-for="featureProps in featuresRecentlyRequestedProcessingProps" :key="featureProps.get('DIGITIZED_FEATURE_PROPERTY_GEOJSON')">{{ featureProps.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,
        },
        featuresRecentlyRequestedProcessingProps: {
            type: Object,
            default: [],
        },
    },
    emits: {
        'update:vModelSelectedGeometryOrder': null,
    },
    computed: {
        compPropsVModelSelectedGeometryOrder: {
            get() {
                console.log('get.compPropsVModelSelectedGeometryOrder:', this.vModelSelectedGeometryOrder);
                return this.vModelSelectedGeometryOrder;
            },
            set(value) {
                console.log('set.compPropsVModelSelectedGeometryOrder:', value);
                this.$emit('update:vModelSelectedGeometryOrder', value);
            },
        },
    },
    methods: {
        onGeometryOrderSelected(evt) {
            const msg = JSON.stringify({ msg: verboseTag + 'xcx onGeometryOrderSelected():', evt: evt });
            console.log(msg);
            this.compPropsVModelSelectedGeometryOrder = evt;
        },
    },
};
</script>

parent-1 GeoTIFFOverlaySettingsLayoutContainer.vue:

<GeoTIFFOverlaySettingsGeomsOrderDropDownList
        v-model:vModelSelectedGeometryOrder="vModelSelectedGeometryOrder"
        v-bind:isOrdersDropDownListDisabled="isOrdersDropDownListDisabled"
        v-bind:featuresRecentlyRequestedProcessingProps="featuresRecentlyRequestedProcessingProps"
    ></GeoTIFFOverlaySettingsGeomsOrderDropDownList>
    

parent-2:

<GeoTIFFOverlaySettingsLayoutContainer
        v-bind:isOrdersDropDownListDisabled="isOrdersDropDownListDisabled"
        v-bind:featuresRecentlyRequestedProcessingProps="featuresRecentlyRequestedProcessingProps"
        v-model:vModelSelectedGeometryOrder="vModelSelectedGeometryOrder"
></GeoTIFFOverlaySettingsLayoutContainer>

...
...
...

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