i have a problem when i use my component for google AddressAutocomplete

somthing like that in the component : @if($show) <x:google-address-lookup wire:model="address"/> @endif

and i whant only when the use click on fuction and make show = true, and then i whant to show the google-address-lookup inside the component: (need to install https://www.npmjs.com/package/google-address-autocomplete)

<div class="input-group"
    wire:ignore
    x-data={lookup:{}}
    x-init="() => {
        new AddressAutocomplete('.google-address-lookup', (result, raw) => {
            @this.set('lookup', result)
        });
    }"
    {{ $attributes }}
    >
    <input
        x-data
        x-on:address:list:refresh.window="$('.google-address-lookup').val('')"
        x-on:keydown.enter.prevent
        wire:ignore.self
        wire:loading.attr="readonly"
        autocomplete="google-lookup"
        class="form-control google-address-lookup"
        required
        type="search"
    >
</div>

when i use in first step the component work and i see the address-autocomplete in dropdown and my chrome ask if i whant to use my locaction

but if i put the @if($show) <x:google-address-lookup wire:model="address"/> @endif

if i didnt use @if($show) so its work current but if i make a @if its didnt work :(

and i didnt get an error in a console when i start to type the address-autocomplete didnt work and the chrome didnt ask me to get my locaction

someone can help me with that problem?

thanks :)