VuetifyJS Advanced slots autocomplete with Google Places API

I need to get VuetifyJS advanced slots to work with the Google Places API. Currently some addresses only show up in the autocomplete dropdown after clicking the "x" in the form field to delete the input text.

Here is a CodePen demonstrating the issue: https://codepen.io/vgrem/pen/Bvwzza Some addresses work right away, some not at all - it's pretty random. Any ideas on how to fix this are very welcome.

JS:

    new Vue({
  el: "#app",
  data: () => ({
    isLoading: false,
    items: [],
    model: null,
    search: null,
  }),

  watch: {
    search(val) {
      if (!val) {
          return;
      }

      this.isLoading = true;

      const service = new google.maps.places.AutocompleteService();
      service.getQueryPredictions({ input: val }, (predictions, status) => {
        if (status != google.maps.places.PlacesServiceStatus.OK) {
          return;
        }

        this.items = predictions.map(prediction => {
          return {
            id: prediction.id,
            name: prediction.description,
          };
        });

        this.isLoading = false;
      });
    }
  }
});

HTML:

<div id="app">
  <v-app id="inspire">
    <v-toolbar color="orange accent-1" prominent tabs>
      <v-toolbar-side-icon></v-toolbar-side-icon>
      <v-toolbar-title class="title mr-4">Place</v-toolbar-title>
      <v-autocomplete
        v-model="model"
        :items="items"
        :loading="isLoading"
        :search-input.sync="search"
        chips
        clearable
        hide-details
        hide-selected
        item-text="name"
        item-value="symbol"
        label="Search for a place..."
        solo
      >
        <template slot="no-data">
          <v-list-tile>
            <v-list-tile-title>
              Search for a <strong>Place</strong>
            </v-list-tile-title>
          </v-list-tile>
        </template>
        <template slot="selection" slot-scope="{ item, selected }">
          <v-chip :selected="selected" color="blue-grey" class="white--text">
            <v-icon left>mdi-map-marker</v-icon>
            <span v-text="item.name"></span>
          </v-chip>
        </template>
        <template slot="item" slot-scope="{ item, tile }">
          <v-list-tile-avatar
            color="indigo"
            class="headline font-weight-light white--text"
          >
            
          </v-list-tile-avatar>
          <v-list-tile-content>
            <v-list-tile-title v-text="item.name"></v-list-tile-title>
            <v-list-tile-sub-title v-text="item.symbol"></v-list-tile-sub-title>
          </v-list-tile-content>
          <v-list-tile-action> <v-icon>mdi-map-marker</v-icon> </v-list-tile-action>
        </template>
      </v-autocomplete>
      <v-tabs
        slot="extension"
        :hide-slider="!model"
        color="transparent"
        slider-color="blue-grey"
      >
        <v-tab :disabled="!model">Places</v-tab>
      </v-tabs>
    </v-toolbar>
  </v-app>
</div>

(I enabled the relevant API's in Google Cloud.)

from VuetifyJS Advanced slots autocomplete with Google Places API