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

Working on a Vue.js and TypeScript project.

I had this:

@Prop() enabled!: boolean = false;

And got this error:

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. Prop being mutated: “enabled”

And fixed by doing:

@Prop({default: false}) enabled!: boolean;

Discovered that you set the default in the @Prop init, versus inline.

Jon