Here is the solution that worked for me without any package.
it might help some one.
<template>
<q-input
ref=“autocomplete”
filled
v-model=“user.address”
label=“Physical Address”
for=“address” //id attribute
hint=“Your permanent address”
:rules="[val => !!val || ‘This field is required.’]"
/>
</template>

and in mounted
<script>
mounted() {
this.autocomplete = new google.maps.places.Autocomplete(
// (this.$refs.autocomplete),
(document.getElementById(“address”)),
{types: [‘geocode’]}
);
this.autocomplete.addListener(‘place_changed’, () => {
let place = this.autocomplete.getPlace();
let ac = place.address_components;
console.log(ac);
}
});
<script>

I remove the the vue-google-autocomplete package.

Import
<script src=“https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=places”></script>

I find out that i was giving reference instead of id, I guess google map api only work with id attribute.

Here is the solution that worked for me. it might help some one.
<q-input
ref=“autocomplete”
filled
v-model=“user.address”
label=“Physical Address”
for=“address” //id attribute
hint=“Your permanent address”
:rules="[val => !!val || ‘This field is required.’]"
/>

and in mounted

mounted() {
this.autocomplete = new google.maps.places.Autocomplete(
// (this.$refs.autocomplete),
(document.getElementById(“address”)),
{types: [‘geocode’]}
);
this.autocomplete.addListener(‘place_changed’, () => {
let place = this.autocomplete.getPlace();
let ac = place.address_components;
console.log(ac);
}
});

Also Thanks for your time @dobbel