so i'm new to Vue and i'm trying to pass text from a child component(InputComp) to it's parent and then again reflect the change in a different child component (ReflectiveComp).

        Home
      /      \
     /        \
    /          \
inputComp    ReflectiveComp

So in the template of inputComp i'm using the following input to get the data:

and in the script section of inputComp, i've added a watcher to listen to changes:

export default defineComponent({
  name: 'inputComp, ',
  data(){
      return{
          inputText: ''
      }
  },
  watch:{
      inputText: function(val, oldVal){
          this.$emit('change-input',val);
      }
  }
});

In the parent component (Home), highlight is the variable i want to pass into ReflectiveComp component:

<template>
      <inputComp @change-input="onChange"/>
      <ReflectiveComp :highlight="highlight"/>
</template>
<script>
export default defineComponent({
  components: { Countries, HighlightFilter },
  data(){
    return{
      highlight: 0
    }
  },
  methods:{
    onChange(val){
        this.highlight = val;
    }
  }
});
</script>

and in the ReflectiveComp:

<template>
        <label>{{highlight}}</label>
   </template>
        
   <script>
    
    import { defineComponent } from 'vue'
    
    export default defineComponent({
        name: 'ReflectiveComp',
        props:{
          highlight: Number
        },
    </script>

From the results i've been getting it seems that: the onChange method inside the parent component (Home) is being triggered and updated everytime we change the input in inputComp component.

The issue: the highlight vraiable is not changing in ReflictiveComp.

What am i doing wrong??