In your Vue component, you can manage using CSS class something like that
but you have to write the CSS for that

<div class="container-fluid p-3 roombody" :class="sender_participant">
    <div v-for="roommsg in roommsgs" v-bind:key="roommsg.id">
        <div class="container">                        
            <p id="roommsg" class="rounded-top rounded-bottom p-1 text-white"> {{ roommsg.message }} </p>                                       
        </div>
    </div>
</div>

In script

export default {
    ....
    computed :{
        sender_participant(){
           return this.user_id==this.logged_in_user ? 'right' : 'left';
        }
    },
}

You have to check whether sender is logged in user or not. something like above assume this.logged_in_user is your logged in user_id

there is lots of ways to manage but I guess this is easy for the beginner

Update

So I found a way to the thing i want in my chatroom, sharing it to you guys that’s having the same problem.

Vue Component

<!-- this is for the logged in user -->
<div id="roommsguser" v-if="roommsg.user_id === user_id">
<p><span>  {{ roommsg.message }} </span></p>
<p id="roommsgtime"> <i> {{ roommsg.created_at }} </i> </p>
</div>
 <!-- this is for the other user -->
<div id="roommsgguest" v-else>
<p><span>  {{ roommsg.message }} </span></p>
<p id="roommsgtime"> <i> {{ roommsg.created_at }} </i> </p>
</div>

then on my css

CSS

#roommsguser{
    text-align: right;  
}

#roommsguser span{
    color: white;
    padding: 5px;

    background-color: #0080ff;
    border-radius: 30px;
}

#roommsgguest{
    text-align: left;  
}

#roommsgguest span{
    color: white;
    padding: 5px;
    margin: 3px;
    background-color: #14487C;
    border-radius: 30px;
}

#roommsgtime{
    font-size: 60%;
    color: #ececec;
}

Tho im not sure if this is the best way to do this, but it works on my end 🙂