VueJS error Avoid mutating a prop directly

You should not mutate the props in your child component. You can only mutate the object but not primitives. So, you can use data option or a computed property:

data() {
  return {
    childValue: this.value; // initialize props value
  }
}

Now, you can change the childValue:

closeDialog() {
   this.childValue = false;
},

Make sure to use childValue everywhere inside your child component instead of value props.

This happens because you have props value in your v-model.

Do not do that, as that will mutate the prop(value) when v-model changes (you should only change data values with v-model afaik, but in this case, you don't even need additional data variable).

Since vuejs v2.3.0, it is suggested to emit value to the parent, so that parent changes it, and it is then passed to child component.

---

So all you have to do is:

in v-dialog component

remove v-model and replace it with :value="value" @input="$emit('input')"

And your function:

closeDialog() {
    this.$emit('input');
}

In panel-desconectar-modal component use v-model="showDesconectar".

---

This will work because:

<input v-model="something"> is syntactic sugar for:

<input   

    v-bind:value="something"
    v-on:input="something = $event.target.value">

Here is working example pen which I provided in an answer to similar question.

This is really the moment to ask yourself "Do I really need a prop? Can I do this with data? Am I here because I mistakenly put some state in Vue component?"

If you're the author of the page and the component, and the component only appears once on the page, there is no good reason to use props. If you need props because the component is repeated for all the lines in an array, make the prop just the array index, so the component can directly modify the source array in the store. Vue components should not contain state, especially state that needs to be shared, and do not enjoy being tightly bound to each other. The parent-child relationship arises out of the chance of their placement in the DOM tree, (children occur inside the markup of parents). This is like a chance meeting in a nightclub. The child may have nothing else to do with the parent. The hierarchy of your source data should be expressed, independently of your markup, in the structure of your store. Your Vue components, where possible, should have an intimate two way relationship with the store, and not talk much to each other :-)