title: VueJS: How to use Google places API with multiple refs
body: <p>I'm using the Google places API for my work and everything works fine. However, I have a unique scenario where I need to have more than one delivery address, hence I'll need to make Google place API works that way.</p>
  
  <p>Here is my current code:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div v-for="(search, index) in searchInput" :key="index"&gt;
        &lt;input type="text" ref="search" v-model="search.city"&gt;
      &lt;/div&gt;
      &lt;button type="button" @click="addMore"&gt;Add more&lt;/button&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: "App",
    data: () =&gt; ({
      location: null,
      searchInput: [
        {
          city: ""
        }
      ]
    }),
    mounted() {
      window.checkAndAttachMapScript(this.initLocationSearch);
    },
    methods: {
      initLocationSearch() {
        let autocomplete = new window.google.maps.places.Autocomplete(
          this.$refs.search
        );
        autocomplete.addListener("place_changed", function() {
          let place = autocomplete.getPlace();
          if (place &amp;&amp; place.address_components) {
            console.log(place.address_components);
          }
        });
      },
      addMore() {
        this.searchInput.push({ city: "" });
      }
    }
  };
  &lt;/script&gt;
  
  </code></pre>
  
  <p>I get this error from the API: <code>InvalidValueError: not an instance of HTMLInputElement</code> and <code>b.ownerDocument is undefined</code></p>
  
  <p>How do I make the <code>refs</code> unique for the individual item that I add and then pass it to the <code>initLocationSearch</code> method? Please, any help would be appreciated.</p>
  
  <p>Her is a <a href="https://codesandbox.io/s/zen-dirac-f30un" rel="nofollow noreferrer">Codesandbox</a> demo</p>