Livewire.dispatch from javascript returns 404 not found

Question

i have a kpi.blade that calls child livewire kpi-activity

<livewire:admin.performance.kpi.kpi-activity />

which calls kpi-activity.php from button

 <button wire:click="callMap({{ $item['id'] }})" wire:loading.remove
                                    wire:target="callMap({{ $item['id'] }})"
                                    data-tooltip-target="tooltip-mapping-{{ $item['id'] }}"
                                    data-tooltip-placement="left"
                                    class="inline-block py-3 px-2 hover:text-blue-600 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-blue-300">{{ svg('tabler-list-details') }}</button>
                             

kpi-activity.php (livewire)

    #[On('testing')]
    public function test()
    {
        dump('d');
    }

    #[On('openMap')]
    public function openMap($kpiId)
    {
        $this->kpiId = $kpiId;
        $this->kpi = $this->m_kpi->get4KAMapping($kpiId);
        $this->kpiYr = $this->kpi->yr;
        $this->kpiTitle = $this->kpi->title;
        $this->kpiKcdiom = $this->kpi->kcdiom_id;
        $this->options['categories'] = $this->getCategories();
        $this->showForm = true;
    }

    public function render()
    {
       
        $kpiActivities = []; //query value, i just put [] for simplicity's sake

        $resetOptions  = [
            'options' => $this->options,
            'sof_category' => $this->sf_category,
            'sof_activity' => $this->sf_activity,
        ];
        $this->dispatch('rsof_KA', $resetOptions);
        return view('livewire.admin.performance.kpi.kpi-activity', ['kpiActivities' => $kpiActivities]);
    }

openMap works and all other [on] function works, except for #[On('testing')] which is called from kpi-activity.blade which is the same as other [on] functions

 <div wire:ignore>
  <select id="sf_category_KA" wire:model.live="sf_category"
   wire:change="$dispatch('test')">
   <option value="">Category</option>
    </select>
 </div>

 @script
 <script>
  // $wire.dispatch('testing'); //works, but i need the options value
            
     $wire.on('test', () => {
     console.log('dd'); //ok

     // $wire.dispatch('testing'); //404
     // Livewire.dispatch('testing'); //404
     window.Livewire.dispatch('testing'); //404
     console.log('gg'); //ok
      });

     $wire.on('rsof_KA', (data) => { //works
     // does something
     )};
  </script>
    @endscript

in the console log

livewire.js?id=xxx
response = await fetch(updateUri, options);

i've tried:

• clearing cache
• optimize:clear
• rewrote the code instead of copying
• use $listeners instead of [on]
• use dispatchTo
• console.log(Livewire) and it returns
• rename the function
• empty cache and hard reload
• check the event in network>global event and it does exist

but nothing seems to works. i have the exact same kind of code structure in another module but they work just fine. i've been stuck for hours on this and i ran out of of options on what could have been wrong