Websocket internal message function problem vue

I am now using websocket to do a simple internal message chat function. Now there is a problem that is difficult to solve, that is, offline message receiving and unread message reminder

<div class="subordinate">
<!--  -->
    <ul>
        <li v-for="(item,index) in subordinatelist" :key="index" @click="test(index,item)" :class="{on:activeButton==index ,"one":!index }">
            <!--  -->
            <img :src="item.User.UserPic">
            <h3 class="down_name">{{item.User.Username}}</h3>
        </li>
    </ul>
</div>

<div class="right_top">
<!--  -->
    <h4 class="chat_record">{{item.User.Username}}<a @click="chatRecord(item)">()</a></h4>
    <div class="box_bd" id="content">
        <ul>
            <li class="message clearfloat" v-for="(item1,index) in infoList[item.User.Username]" v-if="infoList != null">
                <div class="mytime"><span>{{myDate | moment("HH:mm:ss")}}</span></div>
                <div class="mes_box">
                    <div class="message_p">
                        <!--  -->
                        <div class="clearfloat mes_p_1" v-if="item1.myChat != null">
                            <div class="mes_p_2">
                                <p v-html="item1.myChat">
                            </div>
                        </div>
                        <!--  -->
                        <div class="clearfloat mes_p_3" v-if="item1.heChat != null">
                            <div class="mes_p_4">
                                <p v-html="item1.heChat">
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

created() {
  this.$post("/chat", { token: this.token }).then(res => {
    this.subordinatelist = res.info.UserList
       for (let j = 0; j < this.subordinatelist.length; jPP) {
           this.infoList[this.subordinatelist[j].User.Username] = []
    }
  })
},

first call up the list of all friends from the interface, and add the user name as the subscript to the array this.infoList in the loop.
this.message is the input, which is directly push into the myChat of infoList and displayed on the interface

let messageMyChat = { myChat: this.message }
this.infoList[this.userName].push(messageMyChat)

isChat is the value passed by websocket.vue, and message2 is the content sent to the opposite side

watch: {
  isChat(Val, oldVal) {
    this.message2 = Val.Content
    this.sendChat()
  }
},

I use the same method above to push directly into the heChat of infoList and display it on the interface

sendChat() {
   let contentLsit = this.message2.split(",")
   this.infoList[contentLsit[0].trim()].push({ heChat: contentLsit[1].trim() });
      //
   this.nextTick()
    }