html vue.js readonly,vue.js - Vue warn $listeners and $attrs is readonly - Stack Overflow

I am getting a lot of Vue warnings saying $listeners is readonly or $attrs is readonly and related to different Bootstrap items or to .

For example:

[Vue warn]: $attrs is readonly.

found in

--->

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.

In my main.js the code is as follows:

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 => {

if(!app) {

app = new Vue({

el: '#app',

router,

store,

i18n,

components: { App },

template: ''

})

}

})

My router/index.js code looks as follows:

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) => {

// check for requiredAuth

if(to.matched.some(record => record.meta.requiresAuth)) {

// check if NOT logged in

...

} else {

// proceed to route

next();

}

} else {

next();

}

})

export default router;

As the sample errors come from Display.vue, here is an extract of that code:

All

{{c}}

v-bind:img-src="product.thumbUrl"

img-fluid

img-alt="image"

overlay>

{{product.name}}
{{product.price}} VND

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 => {

querySnapshot.forEach(doc => {

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 ...

}

}

How can I get rid of these errors?