How to read component values from parent vue

Question

I have an input field component I created. In the parent vue I added two of these components - field1 and field2. When either one of these components change I want to concatenate their values and add them to a third input field - field3. Field3 is not a vue component. I tried to add a ref to get the value of the component that did not emit the event, but it always comes back undefined (i.e. console.log(this.$refs.testRef.$data). What is the best way to get the value of field 1 and field2? Lastly how do I change the value of field 3 from the onChange method?

input-field.vue

<template>
  <div>
     <input type="text" @input="valueChanged">
  </div>
</template>
<script>

export default {
   name: 'myInput',
   props: 

      ['myName']
   ,
   emits: ["input"],

   methods:
   {

      valueChanged ()  {

        this.$emit("input",event.target.value)
      }
   }
}
</script>

app.vue

<template>
  <div>
     <my-input myName="field1" @input="onChange"/>
    <my-input ref="testRef" myName="field2" @input="onChange"/>
    <input id="field3" type=text/>
  </div>
</template>
<script>
import myInput from './components/input-field.vue'

export default {
  name: 'App',
  components: {
    myInput
  },
  
     methods: {
   onChange (val) {

     //DOESNT WORK ---->  console.log(this.$refs.testRef.$data)
     console.log(val)
     
     //get the value from field1 and the value from field2 two and combine them to set the value of field3
     //i.e. field3.value = field1.value + '\n' + field2.value
   }
  }
}
</script>