“$attrs is readonly”,“$listeners is readonly”,“Avoid mutating a prop directly”

Question

I am new to Vue. I am trying to develop a chatting application where friend list will be shown on the left menu and the chat box will be shown at the body. I am loading frie

Answer 1

This error was happening to me because I was using Git submodules in my project and I had the following folders:

• ./node_modules - this is for the main project. There was vue installed in these node_modules.
• ./my_git_submodules/vue_design_system/node_modules - design system that provides basic components (also uses vue). Vue was also installed here!!

So because both:

• ./node_modules/vue and
• ./my_git_submodules/vue_design_system/node_modules/vue

existed, running npm run serve (vue-cli-service build underneath) built two instances of Vue. This was a really nasty issue because it broke reactivity in certain cases (ie. you click a button and nothing happens - you just get the $listeners readonly error)

Quick fix:
removing node_modules in the child folder (vue_design_system) and running npm run serve worked for me.

Long term fix:
you'll probably need to make Webpack ignore nested node_modules folders by adding a rule in vue.config.js