title: Vue.js 2 - $attrs / $listeners is readonly
body: <p>I am getting the following error in my Nuxt(Vue.js) app:</p>
  <pre><code>[Vue warn]: $attrs is readonly.
  [...]
  [Vue warn]: $listeners is readonly.
  [...]
  [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.
  </code></pre>
  <p>From what I gather online this is due to a mismatch between Vue instances.</p>
  <p>I am importing a component library (using a Webpack alias) from a Nuxt project. How can I make sure that the same instance is used? I've already changed the webpack alias in the library to that of the error messages (runtime.esm.js) but i still get error messages.</p>
  <p>Stack Call before and after changing the Vue.js alias:</p>
  <p><a href="https://i.stack.imgur.com/z9Fpwm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z9Fpwm.png" alt="Stack Call" /></a>
  <a href="https://i.stack.imgur.com/kpnGMm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kpnGMm.png" alt="Stack Call" /></a></p>
  <p>The code of the component being called is pretty straightforward:</p>
  <pre class="lang-js prettyprint-override"><code>import Vue from 'vue';
  import Renderer from '../Renderer';
  import {default as Attributes} from '../attributes/main';
  
  const renderer = new Renderer();
  
  renderer.registerAttributeType(Attributes.Bold);
  renderer.registerAttributeType(Attributes.Color);
  
  export default Vue.extend(
      {
          name: 'RenderPlane',
          props: {
              parsed: {
                  type: Array,
                  required: true
              }
          },
  
          render: function (createElement) {
              return createElement(renderer.render(this.parsed), null);
          }
      });
  
  </code></pre>
  <p>And this is my Webpack configuration for the component library:</p>
  <pre class="lang-js prettyprint-override"><code>const path = require('path');
  const {VueLoaderPlugin} = require('vue-loader')
  
  module.exports = () =&gt; {
      return {
          mode: 'development',
          context: path.resolve(__dirname, 'source'),
          entry: {
              main: './main.ts',
              compiler: './renderer/main.ts',
              formatter: './formatter/main.ts',
              highlighter: './highlighter/main.ts',
              parser: './parser/main.ts'
          },
  
          output: {
              path: path.resolve(__dirname, 'build'),
              clean: true,
              library: {
                  type: 'umd',
                  name: 'Minerva'
              }
          },
  
          target: 'web',
          devtool: 'source-map',
  
          module: {
              rules: [
                  {
                      test: /\.tsx?$/,
                      use: 'ts-loader',
                      exclude: /node_modules/,
                  },
                  {
                      test: /\.pegjs$/,
                      use: 'pegjs-loader'
                  },
                  {
                      test: /\.vue$/,
                      loader: 'vue-loader'
                  }
              ],
          },
  
          resolve: {
              extensions: ['.pegjs', '.vue', '.ts', '.js'],
              alias: {
                  'vue$': 'vue/dist/vue.runtime.esm.js'
              }
          },
  
          plugins: [
              new VueLoaderPlugin()
          ],
      }
  }
  </code></pre>
  <p>Any help is greatly appreciated. I'm out of ideas.
  Thank you.</p>