Пользовательский интерфейс приложения Vue JS Chat

Question

Добрый день всем! Я разрабатываю приложение чата, используя Laravel + Laravel Echo + Pusher и Vue JS все функции в порядке, но у меня проблема с пользовательским интерфейсом.

Если у вас новый чат, ваше сообщение будет отображаться справа, а если кто-то отправляет чат в окне чата, его / ее сообщение будет отображаться слева.

Я уже сделал интерфейс

<div class="chat-log-container" id="chatlog">
    <div class="chat-log-content">
        <div v-if="currentSender === meSender">
            <ul id="mesender" class="me-sender" v-for="message in chats">
                <li>
                    <div class="sender-name" >{{message.user.firstname}} {{message.user.lastname}} 10:12 AM, Today</div>
                    <div class="sender-message wordwrap">{{message.chat}}</div>
                </li>
            </ul>
        </div>

        <div v-else>
            <ul class="other-sender" v-for="message in chats">
                <li>
                    <div class="sender-name" >{{message.user.firstname}} {{message.user.lastname}} 10:12 AM, Today</div>
                    <div class="sender-message wordwrap">{{message.chat}}</div>
                </li>
            </ul>
        </div>
    </div>
</div>

всякий раз, когда я отправляю сообщение, все сообщения отображаются справа, если кто-то отправляет чат, все сообщения отображаются слева.

Кто-нибудь знает, как заставить мои сообщения отображаться справа, а сообщения других отправителей будут отображаться слева?

Спасибо!