Json being displayed instead on Vue component

Question

**ChatController**

am new to laravel and vue i just got this and wanted learn some new skills. This controller queries a single user from my model called PostRequest i use one-to-one relationship

class ChatController extends Controller
 {
    public function getMessages()
   {

    return view('user.message'); //response()->json($contacts);
   }
   public function get()
  {
    $email = Auth::user()->email;
    $contacts = PostRequest::with('user')->where([['email', $email]])->orderBy('id','DESC')- 
    >first()->user;
    return response()->json($contacts, 200);
   
 }

}

ChatComponent

<template>
  <div class="chat-app">
    <Conversation :contact="selectedContact" :messages="messages" />
    <ContactsList
        v-if="contacts"
        :contacts="contacts"
    />
 </div>
 </template>
  <script>
   import Conversation from './Conversation';
   import ContactsList from './ContactsList';
    export default {
     props: {
        user: {
          type: Object,
          required: true
      }
  },
  data() {
      return {
          selectedContact: null,
          messages: [],
          contacts: null
      }
  },
  mounted() {
    //console.log('LoggedIn User',this.user);
    axios.get('/user/contacts').then((response) => {
       // console.log('contact', response.data);
        if(this.contacts == undefined){return}
        this.contacts = response.data;
    }).catch((error) => {
        console.log(error.message);
    });
},
  components: {Conversation, ContactsList}
 }
</script>

ContactListComponent

this component will pass my user data into message.blade

<template>
<div class="contacts-list" >
    <ul v-for="contact in contacts" :key="contact.id">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, autem.</p>
        <li >
            <div class="avatar">
                <img :src="contact.user.reqPhoto" :alt="contact.user.name">
            </div>
            <div class="contact">
                <p class="name">{{contact.user.name}}</p>
                <p class="email">{{contact.user.email}}</p>
            </div>
        </li>
    </ul>
</div>
</template>
<script>
 export default {
   props: {
      contacts: {
        type: [],
        default: null
        }
     }
 }

message blade this blade file recieves the user data from vue, have tried to view page source nothing is coming in

<section class="inbox">
 <div class="container">
    <div class="row">
       <div class="col-md-8 text-center">
                <div class="card">
                    <div class="card-header">Chat with:</div>
                    <div class="card-body" id="app">
                        <chat-component :contacts="contacts"></chat-component>
                       
                    </div>
                </div>
            </div>
            @include('layouts.sidenav')
        </div>
    </div>
</section>

web Routes

i also tried using same routes its still returns same json file even after trying different browsers

Route::get('/user/messages', [ChatController::class, ('getMessages')])->name('msg');
Route::get('/user/contacts', [ChatController::class, ('get')]);

app.js

require('./bootstrap');

window.Vue = require('vue').default;

Vue.component('chat-component', 
require('./components/ChatComponent.vue').default);
Vue.component("Conversation", 
require("./components/Conversation.vue").default);
Vue.component('contact', 
require('./components/ContactsList.vue').default);
Vue.component("MessagesFeed", 
require("./components/MessageFeed.vue").default);
Vue.component("MessageComposer", 
require("./components/MessageComposer.vue").default);

const app = new Vue({
   el: '#app',
});