Обновление

Так что я нашел способ найти то, что хочу, в своем чате, поделившись им с вами, ребята, у которых такая же проблема.

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>

затем на моем 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;
}

То есть не уверен, что это лучший способ сделать это, но это работает с моей стороны :)

В вашем компоненте Vue вы можете управлять с помощью CSS-класса чем-то подобным, но вы должны написать CSS для этого

<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>

В сценарии

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

Вы должны проверить отправитель вошел в систему пользователя или нет. что-то вроде выше, предположим, что this.logged_in_user - это вы вошли в user_id

, есть много способов управления, но я думаю, что это легко для новичка