title: Element UI dialog component can open for the first time, but it can't open for the second time
body: <p>I'm building web app with Vue, Nuxt, and Element UI.
  I have a problem with the Element dialog component.
  It can open for the first time, but it can't open for the second time.</p>
  
  <p>This is the GIF about my problem.</p>
  
  <p><a href="https://gyazo.com/dfca3db76c75dceddccade632feb808f" rel="nofollow noreferrer">https://gyazo.com/dfca3db76c75dceddccade632feb808f</a></p>
  
  <p>This is my code.</p>
  
  <ul>
  <li>index.vue</li>
  </ul>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;el-button type="text" @click="handleDialogVisible"&gt;click to open the Dialog&lt;/el-button&gt;
      &lt;modal-first :visible=visible&gt;&lt;/modal-first&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  
  import ModalFirst from './../components/ModalFirst.vue'
  
  export default {
    components: {
      'modal-first': ModalFirst
    },
    data() {
      return {
        visible: false,
      };
    },
    methods: {
      handleDialogVisible() {
        this.visible = true;
      }
    }
  }
  &lt;/script&gt;
  
  </code></pre>
  
  <ul>
  <li>ModalFirst.vue</li>
  </ul>
  
  <pre><code>&lt;template&gt;
    &lt;el-dialog
      title="Tips"
      :visible.sync="visible"
      width="30%"
    &gt;
      &lt;span&gt;This is a message&lt;/span&gt;
      &lt;span slot="footer" class="dialog-footer"&gt;
        &lt;a&gt;Hello&lt;/a&gt;
      &lt;/span&gt;
    &lt;/el-dialog&gt;
  &lt;/template&gt;
  &lt;script&gt;
    export default {
      props: [ 'visible' ]
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>And I can see a warning message on google chrome console after closing the dialog.
  The warning message is below.</p>
  
  <pre><code>webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:620 [Vue warn]: 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: "visible"
  
  found in
  
  ---&gt; &lt;ModalFirst&gt; at components/ModalFirst.vue
         &lt;Pages/index.vue&gt; at pages/index.vue
           &lt;Nuxt&gt;
             &lt;Layouts/default.vue&gt; at layouts/default.vue
               &lt;Root&gt;
  </code></pre>
  
  <p>This is the screenshot of the warning message.</p>
  
  <p><a href="https://gyazo.com/83c5f7c5a8e4d6816c35b3116c80db0d" rel="nofollow noreferrer">https://gyazo.com/83c5f7c5a8e4d6816c35b3116c80db0d</a></p>