[Vuejs]-How to read child component values from a parent method — vue.js

There is no need to read the values. Bind them like this: Playground

Read and understand what I have done, do not copy-paste. I have changed some of your code eg. imports

input-field.vue

<template>
  {{name}}
    <input type="text"
           :name="name"
           :id="id"
           :value="modelValue"
           @input="$emit('update:modelValue', $event.target.value)" />
</template>
<script>
export default {
  props: ["modelValue", "id", "name"],
  emits: ["update:modelValue"]
}
</script>

app.vue

<template>
  <div v-for="item in items" :key="item.id">
    <my-input :name="item.name" :id="item.id" v-model="item.value"></my-input>
  </div>
  <br />
  <b>Values in App.vue</b>
  <table border=1>
    <tr v-for="item in items" :key="item.id">
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
      <td>{{item.value}}</td>
    </tr>
  </table>
</template>
<script>
import myInput from "./input-field.vue";
export default {
  name: "App",
  data() {
    return {
      items: [
        { id: "3", name: "test3", value: "test input" },
        { id: "4", name: "test4", value: "" },
        { id: "5", name: "test5", value: "" },
      ],
    };
  },
  components: {
    myInput
  },
};
</script>