title: How to change v-model value from JS
body: <p>I'm using Google autocomplete address form. I found <a href="https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform" rel="noreferrer">example</a> at google official web page. Everything is fine. Everything works! but it's native Javascript,</p>
  
  <p>I have Vue application and I don't like how I change text input values from JS script. <strong>The idea is that when I change something in main input, JS event listener should change values for other inputs:</strong></p>
  
  <pre><code> document.getElementById(addressType).value = val;
  </code></pre>
  
  <p>Problem is that I should use <strong>"document"</strong> to change values:</p>
  
  <pre><code> document.getElementById('street_number').value
  </code></pre>
  
  <p>I would like to have something like tat:</p>
  
  <pre><code> &lt;input type="text" v-model="input.address" ref="addressRef"&gt;
  </code></pre>
  
  <p>And to read values:</p>
  
  <pre><code>export default {
          data() {
              return {
                  input: {
                      address: "",
                      ...
                  }
  
              };
          },
          methods: {
              test() {
                  console.log(this.input.address);
                  console.log(this.$refs.addressRef);
          }
         }
  </code></pre>
  
  <p>So the question is:</p>
  
  <ul>
  <li>How to set the value from JS code to update binding values? Right now values <strong>are null because I use "getElementById("id").value = val"</strong></li>
  </ul>