Как обновить компонент, если данные исчезают после перезагрузки страницы?

Question

Что я хочу:

Когда страница загружается, я получаю данные из БД.Затем, поскольку я присоединяюсь к каналу присутствия ('chat'), я хотел бы видеть новое имя пользователя, которое будет отображаться на странице ниже всех ранее выбранных пользователей.

Что я получаю:

Я получаю предупреждение [Vue warn]: избегайте прямого изменения свойства, так как значение будет перезаписываться при повторном рендеринге родительского компонента.Затем, когда я перезагружаю страницу, я вижу данные из БД (выбранные пользователями), затем она исчезает, и сразу же появляются последние данные (user.name).Вопрос в том, как предотвратить это?

Component.vue

  <tr v-for="user in users"> 
            <td>{{user.name}}</td>
            <td>{{user.ip}}</td>
  </tr>     

<script>
name:'Online',
     data() {
        return {
            users:[],  
            user: ''    
       }    
   },   

 mounted() {
        window.Echo.channel('channelName')
            .listen('eventIp', (e) => {
                this.user = e;    
            });
          window.Echo.join('chat')
            .here(users => (this.users = users))
            .joining(user => (this.users.push(user)))
            .leaving(user => (this.users = this.users.filter(u => (u.id 
                                                !==user.id)))
        );    
    this.fetchData()
   },

methods: {
     fetchData(){
              axios
                .get('api/person')
                .then(response => (this.users= response.data))
                .catch(error => console.log(error));
     },
   }
 }
</script>