Laravel Livewire component not refreshing/reloading automatically after refreshing it

Question

So, I'm currently using Laravel Livewire in one of my projects. But when I try emit an event from one component to another component by magic mathod $refresh , its refreshing (got the dom in xhr request ) the total component but the Front end is not updating realtime.

ProductReviewForm.php Component

  public function save()
    {
        //some functionalities .... 


        $this->emit('reviewSectionRefresh');


    }

ProductReviewSection.php Component

 protected $listeners = [
        'reviewSectionRefresh' => '$refresh',
    ];

    public function render()
    {
        $this->review_lists = ProductReview::orderBy('id', 'DESC')->get();

        return view('livewire.desktop.product-review-section');
    }

So I want to emit the reviewSectionRefresh event to be emitted whenever I call save() function from First component, That should be listened by $listeners from other component. This is working fine. also in xhr I'm getting the refreshed dom but the component in frontend is not updating. Hoping anyone working with Livewire may help with that.

Answer 1

So it seems I've write my component blade view in wrong way.

all things on refreshed component should be wrapped in one div element like this:

<div> 
{{-- Anything you want to do --}}

</div>  

previously my blade file was like. Which is Wrong

<div class=""> 
 {{ -- some dom elements -- }}
</div>

<div class=""> 
{{ -- some other dom elements -- }}
</div>

but that should be like.

<div>
    <div class=""> 
       {{ -- some dom elements -- }}
    </div>

    <div class=""> 
    {{ -- some other dom elements -- }}
    </div>
</div>

So Whatever you write, that should be inside ONE PARENT DIV ELEMENT