How to refresh a element within owl carousel slider in laravel using livewire?

Question

I am creating an E-commerce site where products within an owl carousel slider will show with some information like name, price etc. I have set a counter at the top and also set a function to when I click an icon to add it will increase count and also will show within the slider item added. but when I click, the count increases but my carousel goes away from the screen. When I refresh the page, the carousel comes with an item added above the cart icon. I need to while I click the cart icon cart increase count and the item added will show without page refresh. Below is my code.

    <div class="row" >
            <div class="col-md-12">
                <div class="product_slider carousel_slider owl-carousel owl-theme nav_style1" data-loop="true" data-dots="false" data-nav="true" data-margin="20" data-responsive='{"0":{"items": "1"}, "481":{"items": "2"}, "768":{"items": "3"}, "1199":{"items": "4"}}' >

                    @php
                       $cart = Cart::instance('cart')->content()->pluck('id');
                    @endphp

                    @foreach ($sproducts as $sproduct)
                    <div class="item">
                        <div class="product">
                            
                            <div class="product_img">
                                <div class="product_action_box">
                                    <ul class="list_none pr_action_btn">

                                        @if($cart->contains($sproduct->id))

                                        <li class="add-to-cart tooltip">
                                            <span class="tooltiptext">Item added!</span>
                                            <a href="" wire:click.prevent="removeFromCart({{$sproduct->id}})" ><i class="icon-basket-loaded"></i> Add To Cart</a>
                                        </li>
                                        @else
                                        <li class="add-to-cart">
                                            <a href="" wire:click.prevent="store({{$sproduct->id}}, '{{$sproduct->name}}', {{$sproduct->sale_price}})"><i class="icon-basket-loaded"></i> Add To Cart</a></li>
                                        @endif
                                        

                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

my component of livewire:

protected $listeners = ['refreshComponent'=>'$refresh'];

    public function store($product_id,$product_name, $product_price)
    {
        Cart::instance('cart')->add($product_id,$product_name,1,$product_price)->associate('App\Models\Product');
        $this->emitTo('cart-count-component', 'refreshComponent');
        $this->emitTo('onsale-component', 'refreshComponent');
        return back();
    }

Answer 1

I had a similar case to yours and this is what did it for me:

JavaScript (with jQuery):

window.addEventListener('contentChanged', event => {
    const owl = $('#owlCarousel'); // Owl carousel in question
    $(owl).trigger('destroy.owl.carousel'); // Destroy carousel instance
    $(owl).html($(owl).find('.owl-stage-outer').html()).removeClass('owl-loaded'); // Destroy carousel instance part 2
    $(owl).owlCarousel($(owl).data()); // Initialize Owl carousel once again with same config options
});

Livewire Component:

$this->dispatchBrowserEvent('contentChanged');

Adapted from Alfred Huang's answer to a similar issue without Livewire: https://stackoverflow.com/a/27976562