Sort messages by date

I am creating a simple Chat for my application. I say simple because it will not be in real time.

I only store messages exchanged between two users (one-to-one).

My problem is in displaying the message in order of date. Once the message is received on the left, and the message sent on the right.

The way I am doing it, I am not managing to make this separation. example: https://prnt.sc/uj65qy

In other words, first all messages from one user are displayed and then the message from the other, so that there is no interleaving of data.

I'm doing this...

Chat.vue:

<template>
            <section class="conversation">
                <div class="inner-wrapper">
                    <div class="message own" v-for="my in mymsgs">
                        <div class="body">{{my.message}}</div>
                        <div class="meta">
                            <div title="Mon, Jan 13, 2020 6:31 AM GMT" class="time">You, {{my.formatted_created_at}}</div>
                            <span class="fal fa-trash-alt"></span>
                        </div>
                    </div>
                    <div class="message" v-for="u in usermsgs">
                        <div class="body">{{u.message}}</div>
                        <div class="meta">
                            <div title="Mon, Jan 13, 2020 11:50 AM GMT" class="time">Finley, {{u.formatted_created_at}}</div>
                            <!---->
                        </div>
                    </div>
                </div>
            </section>
            <section class="reply">
                <div>
                    <textarea placeholder="Escreva sua mensagem..." v-model="newmsg"></textarea>
                    <div class="action-row">
                        <div class="actions">
                            <button dusk="send-message-button" @click="sendMsg()" class="btn btn-action-2">
                                <span>Enviar</span>
                            </button>
                        </div>
                    </div>
                </div>
            </section>

</template>

<script>
    export default {
        props: ['avatar','username', 'userid'],
        data(){
            return {
                newmsg: '',
                mymsgs: [],
                usermsgs: [],

            }
        },
        mounted() {
            axios
              .get('/api/chat/getmsgs')
              .then(response => {
                this.mymsgs = response.data.mymsgs;
                this.usermsgs = response.data.usermsgs;
            })
        },
        }
        

    }
</script>

My Controller:

public function getMsgs(Request $request) {

        $mymsgs = Message::where('de_user_id', $request->user()->id)->get()
        ->each(function ($mymsgs) {
            $mymsgs->formatted_created_at = $mymsgs->created_at->format(__('notifications.dateformat'));
            });

        $usermsgs = Message::where('para_user_id', $request->user()->id)->get()
        ->each(function ($usermsgs) {
            $usermsgs->formatted_created_at = $usermsgs->created_at->format(__('notifications.dateformat'));
            });

        return response()->json(['mymsgs' => $mymsgs, 'usermsgs' => $usermsgs]);
        
    }

Is there a solution to my problem within the logic I'm working on?

Note that I store each user's messages in separate variables. Any suggestion?