title: Vue warn $listeners and $attrs is readonly
body: <p>I am getting a lot of Vue warnings saying $listeners is readonly or $attrs is readonly and related to different Bootstrap items or to . </p>
  
  <p>For example:</p>
  
  <pre><code>[Vue warn]: $attrs is readonly.
  
  found in
  
  ---&gt; &lt;BDropdown&gt;
         &lt;Display&gt;
           &lt;App&gt;
             &lt;Root&gt;
  </code></pre>
  
  <p>I am very sure it has something to do with loading the Vue instance twice somehow, but I don't really know, how to do it any other way, so that the routing still works.</p>
  
  <p>In my main.js the code is as follows:</p>
  
  <pre><code>import Vue from 'vue'
  import App from './App'
  import router from './router'
  import firebase from 'firebase';
  import './components/firebaseInit';
  import store from './store';
  import { i18n } from './plugins/i18n.js'
  import BootstrapVue from 'bootstrap-vue'
  import VueCarousel from 'vue-carousel';
  
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'
  
  Vue.use(BootstrapVue);
  Vue.use(VueCarousel);
  
  let app;
  firebase.auth().onAuthStateChanged(user =&gt; {
    if(!app) {
      app = new Vue({
        el: '#app',
        router,
        store,
        i18n,
        components: { App },
        template: '&lt;App/&gt;'
      })
    }
  })
  </code></pre>
  
  <p>My router/index.js code looks as follows:</p>
  
  <pre><code>import Vue from 'vue'
  import Router from 'vue-router'
  import firebaseApp from '@/components/firebaseInit'
  
  Vue.use(Router)
  
  let router = new Router({
    routes: [
      {
        path: '/',
        name: 'display',
        component: Display
      },
    ...
    ]
  })
  
  // Nav Guards
  router.beforeEach((to, from, next) =&gt; {
    // check for requiredAuth
    if(to.matched.some(record =&gt; record.meta.requiresAuth)) {
      // check if NOT logged in
      ...
      } else {
        // proceed to route
        next();
      }
    } else {
      next();
    }
  })
  
  export default router;
  </code></pre>
  
  <p>As the sample errors come from Display.vue, here is an extract of that code:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;b-row&gt;
        &lt;b-input-group prepend="Category"&gt;
          &lt;b-dropdown v-bind:text="currentCategory"&gt;
            &lt;b-dropdown-item @click="categroyChanged('All')"&gt;All&lt;/b-dropdown-item&gt;
            &lt;b-dropdown-item v-for="c in categories" v-bind:key="c" @click="categoryChanged(c)"&gt;{{c}}&lt;/b-dropdown-item&gt;
          &lt;/b-dropdown&gt;
        &lt;/b-input-group&gt;
      &lt;/b-row&gt;
      &lt;div class="row" v-for="i in Math.ceil(products.length / 3)" v-bind:key="i"&gt;
        &lt;div v-for="product in products.slice((i - 1) * 3, i * 3)" v-bind:key="product.id" class="col-md-4 col-6 my-1"&gt;
          &lt;b-card 
            v-bind:img-src="product.thumbUrl"
            img-fluid
            img-alt="image"
            overlay&gt;
            &lt;div slot="footer"&gt;
              &lt;small class="text-muted"&gt;{{product.name}}&lt;br /&gt;{{product.price}} VND&lt;/small&gt;   
            &lt;/div&gt;
              &lt;router-link v-bind:to="{name: 'view-product', params: {product_id: product.product_id}}" class="secondary-content"&gt;
                &lt;i class="fa fa-eye"&gt;&lt;/i&gt;
              &lt;/router-link&gt;
              &lt;router-link v-if="isEmployee" v-bind:to="{name: 'edit-product', params: {product_id: product.product_id}}" class="secondary-content"&gt;
                &lt;i class="fa fa-pencil"&gt;&lt;/i&gt;
              &lt;/router-link&gt;
              &lt;button @click='addToCart(product)' class='button is-info'&gt;&lt;i class="fa fa-cart-arrow-down"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/b-card&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;        
  import firebaseApp from './firebaseInit'
  import { mapActions } from 'vuex'
  
  export default {
    name: 'display',
    data () {
      return {
        txtSearch: null,
        isLoggedIn: false,
        currentUser: false,
        isEmployee: false,
        products: []
      }
    },
    beforeMount () {
      var db = firebaseApp.firestore();
        db.collection('products').get().then(querySnapshot =&gt; {
          querySnapshot.forEach(doc =&gt; {
            const data = {
                'product_id': doc.id,
                'article_number': doc.data().article_number,
                'barcode': doc.data().barcode,
                'category': doc.data().category,
                'colour': doc.data().colour,
                'description': doc.data().description,
                'name': doc.data().name,
                'name_ger': doc.data().name_ger,
                'price': doc.data().price,
                'size': doc.data().size,
                'thumbUrl': doc.data().thumbUrl,
            }
            this.products.push(data)
          })
        }) 
      }
    },
    methods: {
      ...mapActions(['addToCart']),
  
      ... many methods ...
  
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>How can I get rid of these errors?</p>