title: "$attrs is readonly","$listeners is readonly","Avoid mutating a prop directly"
body: <p>I am new to Vue. I am trying to develop a chatting application where friend list will be shown on the left menu and the chat box will be shown at the body. I am loading friend list using an ajax call and routing to chat box based on friend id. Here is the code sample.</p>
  
  <pre><code>&lt;div class="chat-container clearfix" id="chat"&gt;
      &lt;div class="people-list" id="people-list"&gt;
          &lt;chatlist-component&gt;&lt;/chatlist-component&gt;
      &lt;/div&gt;
  
      &lt;div class="chat"&gt;
         &lt;router-view&gt;&lt;/router-view&gt;
      &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>chat list component will load friend list from the server. Here is my app.js file;</p>
  
  <pre><code>Vue.use(VueRouter)
  
  const router = new VueRouter({
    routes,
    linkActiveClass: "active"
  });
  
  
      import ChatComponent from './components/ChatComponent';
      const routes = [
        { path: '/chat/:id/:name', component: ChatComponent , name: 'chat'}
      ];
      Vue.component('chatlist-component', require('./components/ChatlistComponent.vue'));
  
      const app = new Vue({
          el: '#chat',
          router
      });
  </code></pre>
  
  <p>And Chat list component template code</p>
  
  <pre><code>&lt;li class="clearfix" v-for="user in users"&gt;
                  &lt;img :src="baseUrl+'/img/default_image.jpeg'" alt="avatar" class="chat-avatar rounded-circle" /&gt;
                  &lt;router-link class="about" :to="{ name: 'chat', params: { id: user.id, name:user.name }}"&gt;
                      &lt;div class="name"&gt;{{user.name}}&lt;/div&gt;
                      &lt;div class="status"&gt;
                          &lt;i class="fa fa-circle online"&gt;&lt;/i&gt; online
                      &lt;/div&gt;
                  &lt;/router-link&gt;
  
              &lt;/li&gt;
  </code></pre>
  
  <p>It works fine until I switch to another user. When I click on any router list from chatlist component it works fine but throws following error to console.</p>
  
  <pre><code>app.js:19302 [Vue warn]: $attrs is readonly.
  
  found in
  
  ---&gt; &lt;RouterLink&gt;
         &lt;ChatlistComponent&gt; at resources/assets/js/components/ChatlistComponent.vue
           &lt;Root&gt;
  
  app.js:19302 [Vue warn]: $listeners is readonly.
  
  found in
  
  ---&gt; &lt;RouterLink&gt;
         &lt;ChatlistComponent&gt; at resources/assets/js/components/ChatlistComponent.vue
           &lt;Root&gt;
  
  app.js:19302 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "to"
  </code></pre>
  
  <p>Thanks in advance</p>