RouterLink attrs is readonly

Question

I'm starting with VueRouter in Vue.js and I'm getting this errors:

[Vue warn]: $attrs is readonly.

found in

---> <RouterLink>
   <SecondNav> at resources\assets\js\modules\livegame\player\SecondNav.vue
     <Player> at resources\assets\js\modules\livegame\player\Player.vue
       <Root>

[Vue warn]: $listeners is readonly.

found in

---> <RouterLink>
   <SecondNav> at resources\assets\js\modules\livegame\player\SecondNav.vue
     <Player> at resources\assets\js\modules\livegame\player\Player.vue
       <Root>

I have reduced everything I could and the result is that problem is only in router. I did it according docs and I don't have any idea where is problem. Here are my components:

SecondNav.vue

<template>
<div class="row second-top-nav">
    <div class="col-md-offset-1 col-md-11">
        <ul class="nav">
            <li>
                <router-link to='/public/livegame/player/history'>
                    History
                </router-link>
            </li>
        </ul>
    </div>
</div>
</template>

<script>
    export default {}
</script>

Player.vue

<template>
<div>
    <second-nav></second-nav>
</div>
</template>

<script>
import SecondNav from './SecondNav';

export default {
    components: {
        SecondNav
    },
}
</script>

router.js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

import History from './history/History';

export default new VueRouter({
   mode: 'history',
   routes: [
    {path: '/public/livegame/player/history', component: History, name: 'player_history'},
   ],
   linkActiveClass: "active", // active class for non-exact links.
});

Start point player.js

window.Event = new Vue();

import Vue from 'vue';

import router from './router'
import Player from './Player.vue';

let vm = new Vue({
   el: '#player',
   router,
   components: {
      Player    
   },
});

window.vm = vm;

I don't know where is problem or what I'm doing wrong. Everything in application seems to work without problem but these notifications doesn't look that all is right. I'm using Vue.js version 2.5.16 and VueRouter version 3.0.1.

Answer 1

Having multiple Vue instances can lead to this problem...

I fixed this warning: Vue warn $attrs is readonly. found in ...

by removing line: import Vue from 'vue'

while keeping: import VueRouter from 'vue-router'

Reason why it fixed: vue was being loaded twice. Vue is imported at the top of VueRouter. There's no need to import it before VueRouter.