Nuxt js
28-04-2022
Vue Error: Avoid Mutating a Prop Directly
Sinple and and easy way to resolve the Vue error: avoid mutating a prop directly

To fix this error we just need to follow only two simple steps guys

Step 1

In your child component called Child.vue

<template>
<q-dialog  v-model="dialogStatus"> </q-dialog>
</template>
<script>
export default {
props: {
   confirm: {
     type: Boolean,
     default: false,
   },
 },
computed: {
   dialogStatus: {
        get() {
           return this.confirm;
        },
        set() {
           this.$emit('update:confirm', value);
        },
   },
 },

}
</script>

Step 2

In your parent component Parent.vue call your child component

<template>
<Child :confirm="ValueToMutate"  @update:confirm="newValue => ValueToMutate = newValue"
/>
</template>

<script>
export default {
data(){
    return{
        ValueToMutate:  false
    }
}
}
</script>

Thanks