VueJs Component with <template> Tag

VueJs Component with <template> tag to specify the component's template - http://coligo.io

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.3.4/lib/index.js"></script>

<div id="app">
  <button @click="showDialog = true">Show Component PopUp</button>
  <popup v-if="showDialog":show-dialog.sync="showDialog"></popup>
</div>

<template id="popup">
    <el-dialog :visible.sync="showDialog" @visiblechange="updateShowDialog">I am the popup</el-dialog>
</template>

CSS

@import url("//unpkg.com/element-ui@1.3.4/lib/theme-default/index.css");

JavaScript

Vue.component('popup', {
  template: '#popup',
  props : ['showDialog'],
  methods: {
   updateShowDialog(isVisible) {
       if (isVisible) return false;
       this.$emit('update:showDialog', false )
   },
  },
});

var vm = new Vue({
  el: '#app',
  data: {
  	showDialog: false,
  },
  methods: {

  }
});