عدم بروز شدن کامپنت ها تو در تو

سلام
داخل لایووایر وقتی از کامپوننت های تو در تو استفاده میکنم اطلاعات بروزرسانی نمیشن
به این صورت که وقتی یک پیامی ارسال میشه لیست پیام ها باید بروزرسانی بشه و پیام جدید نشون داده بشه
حلقه نمایش پیام ها

@foreach($messages as $message)
                <li class="replies">
                    <div class="media">
                        <div class="profile mr-4"><img class="bg-img" src="{{asset('/images/user.png')}}" alt="Avatar"/></div>
                        <div class="media-body">
                            <div class="contact-name">
                                <ul class="msg-box">
                                    <li class="msg-setting-main position-relative">
                                        <h5 class="d-flex flex-column">
                                            {!! $message->content !!}
                                            <span class="mt-2">
                                        {{message_sent_time($message->updated_at)}}
                                        </span>
                                        </h5>
                                        <livewire:message-section.message-actions/>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </li>
@endforeach

بعد از اینکه پیام ارسال شد و در دیتابیس ذخیره شد، تابع زیر توسط emit و listeners فرواخوانی میشه و آبجکت messages که در حلقه بالا وجود داره بروزرسانی میشه

public function messagePrepend($messageID)
    {
        $this->messages->push(Message::find($messageID));
    }

این کد ها به درستی کار نمیکنن و برای نمایش پیام حتما باید صفحه رفرش بشه
ولی وقتی کد

<livewire:message-section.message-actions/>

رو از حلقه بالا پاک میکنم پیام ها به خوبی نمایش داده میشه و نیازی به رفرش نیست .
اینم اطلاعات کامپوننت message-action :

<div class="msg-dropdown-main">
    <div class="msg-setting cursor-pointer">
        <i class="bi bi-three-dots"></i>
    </div>
    <div class="msg-dropdown">
        <ul>
            <li><a href="#" class="d-flex"><i class="bi bi-fast-forward"></i>forward</a></li>
            <li><a href="#" class="d-flex"><i class="bi bi-clipboard"></i>copy</a></li>
            <li><a href="#" class="d-flex"><i class="bi bi-trash3"></i>delete</a></li>
        </ul>
    </div>
</div>

میشه راهنمایی کنید مشکل از کجاس
ممنون.