title: Vue.js - Element UI - Nested dialog won't open - v-if v-show
body: <p>I'm using <code>vue.js 2.3</code> and <code>element-ui</code></p>
  
  <h3>Situation</h3>
  
  <p>I'm just playing around with the <code>el-dialog</code> component. I'm testing 3 differents options and only one out of the three is working</p>
  
  <p><code>&lt;popup v-if="showDialog" :show-dialog.sync="showDialog"&gt;&lt;/popup&gt;</code> OK</p>
  
  <p><code>&lt;popup v-show="showDialog" :show-dialog.sync="showDialog"&gt;&lt;/popup&gt;</code> PARTIAL OK</p>
  
  <p><code>&lt;popup :show-dialog.sync="showDialog"&gt;&lt;/popup&gt;</code> NOT OK</p>
  
  <h3>Code</h3>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;button @click="showDialog = true"&gt;Show Component PopUp&lt;/button&gt;
    &lt;popup v-if="showDialog" :show-dialog.sync="showDialog"&gt;&lt;/popup&gt;
  &lt;/div&gt;
  
  
  
     &lt;template id="popup"&gt;
          &lt;el-dialog :visible.sync="show" @visible-change="updateShowDialog" &gt;{{data}}&lt;/el-dialog&gt;
      &lt;/template&gt;
  
  Vue.component('popup', {
      name: "popup",
    template: '#popup',
    props : ['showDialog'],
    data(){
      return {
          show: this.showDialog,
        data: "Hello"
      }
    },
    methods: {
     updateShowDialog(isVisible) {
         if (isVisible) return false;
         this.$emit('update:showDialog', false )
     }
    },
     created:function (){
    },
  });
  
  var vm = new Vue({
    el: '#app',
    data: {
      showDialog: false,
    },
    methods: {
  
    }
  });
  </code></pre>
  
  <h3>Fiddles</h3>
  
  <p><a href="https://jsfiddle.net/dbg2e9z2/" rel="nofollow noreferrer">https://jsfiddle.net/dbg2e9z2/</a> OK</p>
  
  <p><a href="https://jsfiddle.net/gtxeaq41/" rel="nofollow noreferrer">https://jsfiddle.net/gtxeaq41/</a> PARTIAL OK</p>
  
  <p><a href="https://jsfiddle.net/dwr5dmfg/" rel="nofollow noreferrer">https://jsfiddle.net/dwr5dmfg/</a> NOT OK</p>
  
  <h3>Problems</h3>
  
  <p>With the 2nd option, the pop-up opens but the content is not displayed.
  With the 3rd option, the pop-up is not displayed at all.</p>
  
  <h3>Questions</h3>
  
  <p>Why this behavior?</p>
  
  <p>What should I do to have the <code>el-dialog</code> working normally while avoiding the <code>v-if</code> (I want to keep the data in cache since the dialog contains a lot of data)</p>