I have a parent component Post where it calls db to get data for select options #group which is only used for searching then I have child components createpost and updatepost in which they share the same blade view modal. the modal has the same select options as the parent; #c_group, #u_group. i also have an input new_group if the group is not available yet in db. on create or update, if a new group is entered, the new group will be saved and appear on the select option after. i managed to get the options to be updated on parent component, but the new ones won’t appear on child

post component

public function getOptions()
    {
        $temp = ModelsCategory::select('group')->groupBy('group')->get();
        return $temp->map(function ($item) {
            return [
                'label' => $item['group'],
                'value' => $item['group'],
            ];
        })->toArray();
    }

 public function mount()
    {
        $this->options = $this->getOptions();
    }

 public function createConfOther()
    {
        $this->showForm = true;
        $this->dispatch('openCreateForm', $this->options, $this->showForm);
        //$this->dispatch('openCreateForm', $this->showForm);
    }

   #[On('refreshOption')]
    public function refreshOption()
    {
        $this->options = $this->getOption();
        $this->dispatch('resetSelect', $this->options);
    }

parent component view

 <livewire:test.create :$showForm :$options />
    <livewire:test.update :$showForm :$options />

    <div class="col-span-2" wire:ignore>
            <select id="group" wire:model.live="group">
                <option value="">Group</option>
                @foreach ($options as $item)
                    <option value="{{ $item['value'] }}">{{ $item['label'] }}</option>
                @endforeach
            </select>
   </div>

   <button wire:click.prevent="createConfOther" type="button" >
            Add New
        </button>

   @script
        <script>
           const groupChoice = new Choices('#group', {
                removeItemButton: true,
                allowHTML: false
            });

            //to refresh the value of select option
            $wire.on('resetSelect', (data) => {
                groupChoice.setChoices(data[0], 'value', 'label', true);
            });
        </script>
    @endscript
   

createpost component

    //public $showForm;
    //#[Reactive]
    //public $options;
    public $showForm = false;
    public $options = [];

 #[On('openCreateForm')]
    public function mount($options, $showForm)
    {
        // $this->options = $options;
        $this->showForm = $showForm;
    }

create view

<div>
    <x-modal-form :$formType :$options :$selectId></x-modal-form>
 @script
        <script>
            const f_groupChoice = new Choices('#{{ $selectId }}', {
                removeItemButton: true,
                allowHTML: false
            });
        </script>
    @endscript
</div>

i’ve tried using reactive after reading (What to do when you need to mutate a reactive prop) and got Cannot mutate reactive prop livewire, probably due to the form is in a child component(i think? please tell me if thats wrong or right)

Instead, when a change is detected in the child component, the error is generated.```

aside from making the same getOption() in createpost and updatepost, how can i pass the new updated data from parent to child?