title: How to avoid mutating a prop directly when all you have is a click?
body: <p>How can I mutate a prop the correct way, so that I don't get the <em>[Vue warn]: Avoid mutating a prop directly</em> message?</p>
  
  <p>I already got the v-model to work on this v-dialog. However, I also want to provide a close button in the dialog itself, which causes this mutation warning, as it's the dialog itself that's mutating the variable. How best to approach this case and solve it?</p>
  
  <p>Dialog.vue:</p>
  
  <pre><code>&lt;template&gt;
      &lt;v-dialog
          :value="value" @input="$emit('input', $event)"
          scrollable
          width="80vw"
          :transition="false"
      &gt;
          &lt;template v-slot:activator="{ on }"&gt;
              &lt;div v-on="on" @click="$emit('open')"&gt;
                  &lt;slot name="button"&gt;
                      &lt;v-btn color="primary"&gt;{{ buttonText == null ? title : buttonText }}&lt;/v-btn&gt;
                  &lt;/slot&gt;
              &lt;/div&gt;
          &lt;/template&gt;
          &lt;v-card
              elevation="10"
              height="80vh"
          &gt;
              &lt;v-system-bar
                  color="light-blue darken-3"
                  window
              &gt;
                  &lt;span&gt;{{title}}&lt;/span&gt;
                  &lt;v-spacer&gt;&lt;/v-spacer&gt;
                  &lt;v-icon @click="value=false"&gt;mdi-close&lt;/v-icon&gt;
              &lt;/v-system-bar&gt;
              &lt;v-card-text&gt; &lt;!-- required here to make the scrollable v-dialog work --&gt;
                  &lt;slot&gt;&lt;/slot&gt;
              &lt;/v-card-text&gt;
              &lt;slot name="actions"&gt;&lt;/slot&gt;
          &lt;/v-card&gt;
      &lt;/v-dialog&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          props: {
              title: {
                  type: String,
                  required: true,
              },
              buttonText: String,
              value: Boolean,
          },
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I can use it quite nicely like:</p>
  
  <pre><code>&lt;mydialog title="Select something" button-text="A button!" v-model="dialog" @open="loadData()"&gt;
    Content goes here...
  &lt;/mydialog&gt;
  </code></pre>
  
  <p>The <code>&lt;v-icon @click="value=false"&gt;mdi-close&lt;/v-icon&gt;</code> is what's incorrectly mutating the "value"-variable.</p>
  
  <p>Sidenote #1: The open event is there so I can populate data (loadData) from a database when the dialog is opened (vs. when its created on the DOM).</p>
  
  <p><strong>UPDATE;</strong> I can get it to work by doing:</p>
  
  <pre><code>&lt;v-icon @click="$emit('close', $event)"&gt;mdi-close&lt;/v-icon&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre><code>&lt;mydialog title="Select something" button-text="A button!" v-model="dialog" @open="loadData()" @close="dialog=false"&gt;
  </code></pre>
  
  <p>However, I feel this is far from being elegant. Aren't there any solutions in where I don't need to add on-Handlers to close this dialog? I almost feel that this is worse than living with the warning.. :|</p>