title: Set initial value fro Vuetify autocomplete with server site search
body: <p>I am using a <code>v-autocomplete</code> component to search for places on the google api. So the <code>items</code> array gets filled after the search input is set. Now I'm trying to set a default value to be searched before the user makes an input to suggest a train station.</p>
  <p>E.g. the search is opened for the city <em>London</em>, now I wan't to set the search input to <em>London Train Station</em> so the user sees the results for that search. However, when I set the search input to a default value it get's reset to null every time.</p>
  <p>Here is my template:</p>
  <pre class="lang-html prettyprint-override"><code>    &lt;v-autocomplete
        ref=&quot;trainStationSearch&quot;
        v-model=&quot;select&quot;
        :items=&quot;places&quot;
        :search-input.sync=&quot;searchTerm&quot;
        no-filter
        return-object
      &gt;
        &lt;template #item=&quot;data&quot;&gt;
          &lt;v-list-item-content&gt;
            &lt;v-list-item-title&gt;{{ data.item.title }}&lt;/v-list-item-title&gt;
            &lt;v-list-item-subtitle&gt;{{ data.item.subtitle }}&lt;/v-list-item-subtitle&gt;
          &lt;/v-list-item-content&gt;
        &lt;/template&gt;
      &lt;/v-autocomplete&gt;
  </code></pre>
  <p>And here the logic:</p>
  <ul>
  <li>I have a watcher on <code>searchTerm</code>, which triggers a debounced search with Lodash's <code>debounce</code> function</li>
  <li>I try to set <code>searchTerm</code> in the <code>mounted</code> hook with the value of the prop <code>prefill</code>
  <ul>
  <li>Doing it with the timeout triggers the watcher on <code>searchTerm</code> and shows the value of <code>prefill</code> on the input of the <code>v-autocomplete</code> component. Shortly after <code>searchTerm</code> is reset to <code>null</code></li>
  <li>Doing it without a timeout results in <code>searchTerm</code> being set to <code>null</code> immediately</li>
  </ul>
  </li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>  @Prop() readonly prefill?: string
  
    private places: any = []
    private searchTerm: string | null = ''
    private select: any = null
  
    private searchGoogle = _.debounce(
      async (val: string, context: Vue): Promise&lt;void&gt; =&gt; {
        if (val) {
          // doing the request to my API, which returns the google results
          const data = await apiManager.searchPlaces(val)
          // set the items array to the google results
          this.$set(context, 'places', data.predictions)
        }
      },
      1000
    )
  
    @Watch('searchTerm')
    private searchPlaces(val: string): void {
      if (val?.trim().length &gt; 0) {
        // trigger debounced request
        this.searchGoogle(val, this)
      } else {
        // empty places array
        this.places.splice(0, this.places.length)
      }
    }
  
    @Watch('select')
    private handleSelection(): void {
      if (!this.select) {
        return
      }
  
      // handle selection
    }
  
    private mounted() {
      if (this.prefill) {
        setTimeout(() =&gt; {
          this.searchTerm = this.prefill!
        }, 1000)
      }
    }
  </code></pre>