Private message with laravel - laravel

Question

I am building a simple private chat app with laravel and vue js.
I have a messages table with a column : id/sender_id/receiver_id and body
my main problem is fetching the users from the messages table. so if sender_id 1 has sent the message to receiver_id 2 then In the sender dashboard, I want to display the NAME of the receiver with receiver id 2 and on clicking the name I want to fetch conversation between these two users.
similarly, in the receiver dashboard, I want to show the list of all users who have sent a message.
so in short, as a logged-in user, I should see the name of users to whom I have sent a message and from whom I got the messages, and when clicking those names I will able to see all the conversations.
Message.php
class Message extends Model
{
use HasFactory;
public function user(){
return $this->belongsTo(User::class);
}
}
currently, I am doing like this
Route::get('/messages','MessageController#index');
public function index()
{
$messages = Message::with('user')
->groupBy('sender_id')
->where('receiver_id',auth()->user()->id)
->orWhere('sender_id',auth()->user()->id)
->get();
}
and my vue is like this
<li v-for="(person,index) in users" :key="index">
{{person.user.name}}{{person.user_id}}
</li>
export default{
data(){
return{
users:[],
messages:[],
}
},
mounted(){
axios.get('/api/users').then((response)=>{
this.users = response.data
})
}
//....
}
my problem is: if I (let's say john )sent a message to David(receiver), I see John name on David dashboard which is correct so on clicking John name I can fetch all the conversation between John and David However, On john's dashboard(message sender to David) I see John's name, but I need here David's name.
so on the sender dashboard, I need the receiver name and on the receiver dashboard, I need sender name.
I think this probably related to the query. please help me. Thanks