Реквизиты не обновляются при изменении ввода в компоненте

Есть 2 основные проблемы:

1. Ваш дочерний компонент генерирует событие input для обоих входов. Вам нужно генерировать разные события, чтобы вы могли различать их в родительском компоненте. Также:

   • :myprop1 = "myprop1" ничего не делает с входным элементом, такого свойства / атрибута myprop1 на входах нет.
   • myprop - ужасное имя, используйте вместо него value.

   Vue.component('simple-input', {
     template: `
       <div>
         <input type = "text" :value = "value1" @input = "$emit('update:value1', $event.target.value)">
         <input type = "text" :value = "value2" @input = "$emit('update:value2', $event.target.value)">
       </div>
     `,
     props: ['value1', 'value2'],
   });
   

2. В родительском компоненте вам необходимо прослушивать события update:value1 и update:value2, чтобы вы могли получать новые значения от дочернего.

   <simple-input
     :value1 = "value1"
     :value2 = "value2"
     @update:value1 = "value1 = $event"
     @update:value2 = "value2 = $event"
   ></simple-input>
   

   Фактически, поскольку мы использовали соглашение об именах update:prop для события, мы можем использовать модификатор sync, чтобы сделать привязку двусторонней. Так становится просто:

   <simple-input
     :value1.sync = "value1"
     :value2.sync = "value2"
   ></simple-input>