如何在不刷新vue.js的情况下在页面上显示消息？

Question

我正在创建实时聊天信使，而我只是在vue中崭露头角。

但我的问题是当我向另一个人发送消息时，另一个人需要刷新才能看到我的聊天。

有人可以帮助我，我想要一个人发送消息而另一个人不需要刷新

这是我的模板

<div class="" v-if="message.user_from == user_id">
    <div class="col-md-12 pull-right" style="margin-top: 10px;">
        <img v-bind:src="'/userPhoto/'+message.pic"
            style="width:40px; border-radius:100%; margin-left:5px" class="pull- right">
        <div class="chatright">
            {{message.msg}}
        </div>
    </div>
</div>
<div clas="" v-else>
    <div class="col-md-12 pull-left" style="margin-top: 10px;">
        <img v-bind:src="'/userPhoto/'+message.pic"
            style="width:40px; border-radius:100%; margin-left:1px" class="pull-left">
        <div class="chatleft">
            {{message.msg}}
        </div>
    </div>
</div>

这是我在vue中显示消息的代码

created(){
   axios.get('http://localhost/getMessages')
.then(response=>{
  console.log(response.data);
  app.privateMsg = response.data
})
.catch(function(error){
  console.log(error);
});
},

  methods:{
usermessages: function(id){
  axios.get('http://localhost/getMessages/'+id)
    .then(response=>{
      console.log(response.data);
      app.messages = response.data
      app.conID = response.data[0].conversation_id
    })
    .catch(function(error){
      console.log(error);
    });
 }
}

这是用户使用的地方

<div v-for="privateMsgs in privateMsg"  class="col-md-12 list">
          <div @click="usermessages(privateMsgs.id)" class="col-md-12 msglist" tabindex="1">
            <div class="fluid-container">
              <div class="row">
                <div class="col-md-2">
                  <img :src="'{{Config::get('app.url')}}/userPhoto/'+privateMsgs.pic" style="width:50px; height:50px; border-radius:100%; margin-top: 5px;">
                </div>
                <div class="col-md-9">
                  <div class="userMsg">@{{privateMsgs.fname}}</div>
                  <p>Message will appear here</p>
                </div>
              </div>
            </div>
          </div>
        </div>