Vue warn $listeners and $attrs is readonly

There are two common reasons why this can happen:

Multiple Vue Locations

This can be due to contradictory locations of where you are importing Vue from, in different files, as others have said. So you might have both import Vue from 'vue' and perhaps import Vue from 'vue.runtime.esm' in your code, for example.

But this can result in multiple instances of Vue, which will cause these errors.

The solution in this case is to use import Vue from 'vue' everywhere in your code, and then alias it in your packaging system (webpack, Parcel, rollup etcetera). An example of this in webpack.config.js, or webpack.renderer.config.js if you're using Electron, would be:

module.exports = {  // ...  resolve: {    alias: {      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1    }  }  // ...}

See more examples in the Vue documents.

White Listing

This can also be because of a need for Vue to be whitelisted as not one of the externals in webpack, for example.

It is worth noting that changes in Bootstrap Vue from 2.0 to a later version, definitely by 2.15 (and possibly earlier), caused this same problem to occur.

module.exports = {  // ...  externals: [    'fast-glob',    'jquery',    'bunyan',    'yaml',    'vue',              // Remove this    'bootstrap-vue',    // Remove this  // ...}

After chasing this for an hour, I realized that a component that I had imported was also accessing Vue. At the top of that file was import Vue from 'vue/dist/vue.esm'. Every other file was simply doing import Vue from 'vue', which was the source of my double-import.

Different javascript packagers have different ways of resolving duplicates. For WebPack, the Resolve Configuration might be helpful in the case of dependencies importing different instances of Vue.

This was my case (https://stackoverflow.com/a/62262296/4202997) but I'll repeat it here to save you time: I was importing vue from a CDN . I simply removed the script and the problem was solved.