livewire wire:ignore but need updated value

Question

I am using a tagify component with wire:ignore and i want to update the value dynamically after input change. I am failing to update value.

Then I manually trigger a Livewire action using JavaScript when the input value changes.With this setup, changes to the customInput field will trigger the handleCustomInputChange Livewire method, allowing you to update the livewireManagedValue property.

But nothings works.

here is my blade:

<div class="row g-3 mb-3" style="margin-top: 50px" wire:ignore>
                        <input type="hidden" wire:model="livewireManagedValue">

                        <input id="customInput" name='input-custom-dropdown' class='some_class_name'
                            placeholder='write some tags' value=''>

                    </div>


@push('body_resources')
        <script src="{{ asset('assets/tagify/tagify.min.js') }}"></script>

        <script>
            var input = document.querySelector('input[name="input-custom-dropdown"]'),
                // init Tagify script on the above inputs
                tagify = new Tagify(input, {
                    whitelist: ["A# .NET", "PHP", "A-0 System", "A+", "A++", "ABAP", "ABC"],
                 
                    maxTags: 10,
                    dropdown: {
                        maxItems: 20, 
                        classname: "tags-look", 
                        enabled: 0, 
                        closeOnSelect: false 
                    }
                })
        </script>
        <script>
            document.addEventListener('livewire:load', function() {

                var customInput = document.getElementById('customInput');
                customInput.addEventListener('input', function() {
                    // Get the value from the custom input
                    var value = customInput.value;

                    // Trigger the Livewire action with the updated value
                    Livewire.emit('handleCustomInputChange', value);
                });
            });
        </script>
    @endpush

In controller:

public $livewireManagedValue;

// Livewire method to handle changes from JavaScript
public function handleCustomInputChange($value)
{
    // Update Livewire-managed value
    $this->livewireManagedValue = $value;
}

What would be the workaround for this? Any help is greatly appreciated.