[Vue warn]: $attrs is readonly. [Vue warn]: $listeners is readonly

As you probably already figured out from another question, I am posting an answer here to save some time everybody else.

The issue with these kind of errors is usually because you import Vue more than once. First in your main app and then also in your component file.So removing the line import Vue from 'vue' from your Header_Component.vue will resolve the issue.But you will have to change the way you are declaring the component to this:

<script lang="ts">//import Vue from 'vue' <-- Commented the import lineexport default {  // <-- Removed Vue.extend()    data() {        return{            logoTrue: <Object> {                'main': true,                'project': false,                'blog': false,                'aboutme': false,                'resume': false            },            main: <boolean>true,            header: <any>"",            image: <any>"",            h1: <any>"",            h2: <any>"",            nav: <any>"",            logos: <any>"",            break: <any>"",        }    }    ...more code...}</script>

Here is more about single file components.

You don't necessarily have to remove Vue.extend. There can be two other reasons why this is happening. Either because Vue is imported from multiple locations.

Or this problem can be because webpack isn't handling Vue as it should and thinks it is an external. So if you go to the file webpack.config.js or webpack.renderer.config.js, as appropriate, and remove Vue from the externals section, then it will start working again.

More information is here.

remove import Vue from 'vue' from Header_Component.vue