title: Vue.js - Element UI - Nested dialog won't open from dropdown menu
body: <p>I am new to Vue.js and ElementUI and having issues opening dialog from dropdown menu. </p>
  
  <p>I am using Vue 2.5.2 and ElementUI: 2.3.4</p>
  
  <p>I tried to follow the solution from
  <a href="https://stackoverflow.com/questions/44548283/vue-js-element-ui-nested-dialog-wont-open-v-if-v-show">Vue.js - Element UI - Nested dialog won&#39;t open - v-if v-show</a> but no luck. </p>
  
  <p><strong>Problem:</strong></p>
  
  <p>Dialog not showing up after clicking the dropdown menu item.</p>
  
  <p>Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>console.clear()
  
  let popupData;
  
  Vue.component('popup', {
   name: "popup",
    template: '#popup',
    props : ['showDialog'],
    data(){
     return {
      show: this.showDialog,
        data: "Hello"
     }
    },
    watch: {
     showDialog: function(n,o){
     this.show = this.showDialog;    
      }
    },
    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>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//unpkg.com/vue/dist/vue.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/element-ui/lib/index.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"&gt;
  
  &lt;div id="app"&gt;
     &lt;el-dropdown&gt;
      &lt;span class="el-dropdown-link"&gt;
        Dropdown List&lt;i class="el-icon-arrow-down el-icon--right"&gt;&lt;/i&gt;
      &lt;/span&gt;
      &lt;el-dropdown-menu slot="dropdown"&gt;
        &lt;el-dropdown-item @click.native="showDialog = true"&gt;Show Component PopUp
          &lt;popup :show-dialog.sync="showDialog"&gt;&lt;/popup&gt;
        &lt;/el-dropdown-item&gt;
      &lt;/el-dropdown-menu&gt;
    &lt;/el-dropdown&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;</code></pre>
  </div>
  </div>
  </p>