Vue JS Chat App UI

Good day everyone! I am developing a Chat App using Laravel + Laravel Echo + Pusher and Vue JS all the functionality are fine but I have a problem with the UI.

If you have a new chat, your message will display on the right side and if someone sends a chat on the chatbox, his/her message will display to the left.

I already made the UI

<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" >  10:12 AM, Today</div>
                    <div class="sender-message wordwrap"></div>
                </li>
            </ul>
        </div>

        <div v-else>
            <ul class="other-sender" v-for="message in chats">
                <li>
                    <div class="sender-name" >  10:12 AM, Today</div>
                    <div class="sender-message wordwrap"></div>
                </li>
            </ul>
        </div>
    </div>
</div>

whenever I make a message, all messages will display on the right, if someone sends a chat, all messages will display on the left.

Thanks!

via Chebli Mohamed