How to mount alphine functions after DOM changes?

[oliver-modernmc]

@if($withSearch)
    {{-- Dropdown with search capability --}}
    <div x-data="dropdownComponent({{ json_encode($options) }})">
        <a
            href="#"
            {{ $attributes->merge(['class' => ($showToggle ? 'dropdown-toggle' : '') . $class]) }}
        >
            {!! $rawOptions && isset($options[$value]) ? $options[$value] : e($value ?? $placeholder) !!}
        </a>
        <div class="dropdown-menu px-2" aria-labelledby="dropdownMenuButton" x-placement="bottom-start">
            <input type="text" class="form-control" placeholder="Search..." x-model="search" @input="filterOptions">
            <template x-for="(option, key) in filteredOptions" :key="key">
                <a href="#"
                @click.prevent="$wire.call('{{ $action }}', '{{ $id }}', key)"
                class="dropdown-item"
                x-text="option">
                </a>
            </template>
        </div>
    </div>

    
    <script>
        function dropdownComponent(options) {
            return {
                search: '',
                options: options,
                filteredOptions: options,
                filterOptions() {
                    this.filteredOptions = Object.keys(this.options).filter(key => this.options[key].toLowerCase().includes(this.search.toLowerCase())).reduce((obj, key) => {
                        obj[key] = this.options[key];
                        return obj;
                    }, {});
                }
            }
        }
    </script>
@else
(...)

Basically this is the whole code.
This is used inside the table to display a dropdown options with search filter.

Initially the table is blank at first (due to preset date filter). I have to adjust the date filter in order to fill-up the table.
The problem is this component doesn't work correctly (due to dom changes, the functions doesn't get remounted).
There will be no dropdown list (but I can see that there are values on json_encode.

Is there a way for me to rerender/remount alpine functions due to dom update?

[ekwoka]

You should use Alpine.data to define the component script, and ensure that the script run and runs BEFORE you add the other dom to the page. Or deliberately delay it and manually initialize it.

You basically just have a race condition.

assuming your script tag is running at all.

realistically, you could just also include the data component from the get go.

[oliver-modernmc]

You got any a basic sample implementation of that using my code?

[ekwoka]

Which part?

In this case, just moving the data declaration outside of the conditional would do it...