VueJS + Quasar Framework + Google Places Autocomplete = InvalidValueError: not an instance of HTMLInputElement

Question

尝试对我的地址表实施谷歌自动完成。我正在使用 Quasar 框架，找不到解决方案：InvalidValueError: not an instance of HTMLInputElement

在我的地址表和所有相关的脚本下面：

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_TOKEN&libraries=places"></script>

<template>
  <q-card-section class="q-pt-none">
    <q-form @submit="save" class="q-gutter-md">
      <q-input
        filled
        v-model="modelAddress.title"
        :label="$t('address_title_label')"
        :hint="$t('address_title_hint')"
        lazy-rules
        :rules="[isNotEmpty]"
      />
      <q-input
        filled
        v-model="modelAddress.country"
        :label="$t('address_country_label')"
        :hint="$t('address_country_hint')"
        lazy-rules
        :rules="[isNotEmpty]"
      />
      <q-input
        filled
        v-model="modelAddress.city"
        :label="$t('address_city_label')"
        :hint="$t('address_city_hint')"
        lazy-rules
        :rules="[isNotEmpty, isCityOrPostalCode]"
      />
      <q-input
        filled
        v-model="modelAddress.code"
        :label="$t('address_code_label')"
        :hint="$t('address_code_hint')"
        lazy-rules
        :rules="[isNotEmpty]"
      />
      <q-input
        filled
        v-model="modelAddress.street"
        ref="streetRef"
        id="streetRef"
        :label="$t('address_street_label')"
        :hint="$t('address_street_hint')"
        lazy-rules
        :rules="[isNotEmpty]"
      />
      <q-input
        filled
        v-model="modelAddress.number"
        :label="$t('address_number_label')"
        :hint="$t('address_number_hint')"
        lazy-rules
        :rules="[isNotEmpty]"
      />
      <div class="address-form-btn">
        <q-btn color="primary" :label="$t('save_btn')" type="submit" />
      </div>
    </q-form>
  </q-card-section>
</template>

<script>
/* eslint-disable */
import { defineComponent, onMounted, ref } from "vue"

export default defineComponent({
  name: "AddressFrom",
  setup () {
    const streetRef = ref()
    onMounted(() => {
      const autocomplete = new google.maps.places.Autocomplete(streetRef.value, {
        types: ['address'], 
        fields: ['address_components']
      })
    })
    return { streetRef }
  },
  data() {
    return {
      modelAddress: this.address
    }
  },
  props: {
    address: {
      type: String,
      default: "",
    },
  },
  methods: {
    save() {
      this.$emit("save", this.$data.modelAddress)
    },
    isNotEmpty(val) {
      if (!val) {
        return this.$t("please_pick_something")
      }
    }
  }
})
</script>

希望这个问题是通用的，这样其他人也可以受益