title: Update multiple inputs programmatically in vue
body: <p>I have a form where I need to update multiple other form fields when another field is updated. For example, I have a contact name and depending on the contact name, I need to update the values of the email and phone. </p>
  
  <pre><code>&lt;template&gt;
    &lt;custom-input :value="contact.name" @input="event =&gt; contact.name = event.target.value" /&gt;
    &lt;custom-input :value="contact.phone" @input="event =&gt; contact.phone = event.target.value" /&gt;
    &lt;custom-input :value="contact.email" @input="event =&gt; contact.email = event.target.value" /&gt; 
  &lt;/template&gt;
  
  &lt;script&gt;
  ...
  props: {
    contact: {
      type: Object,
      required: true
    }
  },
  watch: 
    "contact.name": function(value) {
      if (this.contact.name === "john") {
        this.contact.email = "john@email.com"
        this.contact.phone = "1111111111"
      } else if (this.contact.name === "ed") {
        this.contact.email = "ed@email.com"
        this.contact.phone = "2222222222"  
      }
    }
  }
  
  ...
  &lt;/script&gt;
  
  </code></pre>
  
  <p>I understand that Vue doesn't like this because it separates the DOM from the data model. My first thought was to use <code>$refs</code> but those are read only. What's the right way to do this?</p>
  
  <p>Another thought I had was to set the value of <code>name</code> and <code>phone</code> to computed properties. The problem with that is that it doesn't get watched on the form in the parent component. </p>
  
  <p>This might also tie in with my misunderstanding of "two-way" binding. I've always reasoned that the form is one way, and the data within the component's script is the other which it is not. So, what's the other way?</p>
  
  <p>A final thought I have is that I might have to emit an event instead?</p>
  
  <pre><code>&lt;template&gt;
    &lt;custom-input :value="contact.name" @input="event =&gt; contact.name = event.target.value" /&gt;
    &lt;custom-input ref="phone" :value="contact.phone" @input="event =&gt; contact.phone = event.target.value" /&gt;
    &lt;custom-input ref="email" :value="contact.email" @input="event =&gt; contact.email = event.target.value" /&gt; 
  &lt;/template&gt;
  
  &lt;script&gt;
  ...
  props: {
    contact: {
      type: Object,
      required: true
    }
  },
  watch: 
    "contact.name": function(value) {
      if (this.contact.name === "john") {
         this.$refs.email.$emit("input", "john@email.com")
         this.$refs.phone.$emit("input", "111111111111")
      } else if (this.contact.name === "ed") {
         this.$refs.email.$emit("input", "ed@email.com")
         this.$refs.phone.$emit("input", "222222222222")
      }
    }
  }
  </code></pre>
  
  <p>That doesn't seem to work either. Bummer. </p>
  
  <p><strong>Edit</strong></p>
  
  <p>Fixed syntax errors</p>
  
  <p><strong>Edit 2</strong></p>
  
  <p>Showed that <code>input</code> was actually a separate child component </p>