JsPanel + Vue

HTML

<script src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspanel3/3.9.3/jquery.jspanel-compiled.js"></script>

<div id="app">
  <h1>JsPanel + VueJS</h1>
  <component :is="currentView" @current-close="currentClose"></component>
  <button type="button" @click="$.jsPanel()">
    JsPanel
  </button>
	 
</div>

CSS

@import url("https://cdnjs.cloudflare.com/ajax/libs/jspanel3/3.9.3/jquery.jspanel.css");

JavaScript

var PanelCom = {
  template: `<div class="jspanel">
		<form>
			<p><input type="text" name="firstName" placeholder="First Name"></p>
			<p><input type="text" name="lastName" placeholder="Last Name"></p>
		</form>
	</div>`,
  mounted: function() {
		let self = this;
    $.jsPanel({
      headerTitle: "Example jsPanel",
      content: $('.jspanel'),
      callback: function() {
        this.content.css("padding", "15px");
      },
			onclosed(){
				self.handleClose();
			}
    });
  },
	methods:{
		handleClose(){
			alert('closed');
			this.$emit('current-close');
		}
	}
}

new Vue({
  el: '#app',
  components: {
    PanelCom
  },
  data: {
    currentView: null
  },
  methods: {
    jsPanelClick() {
      this.currentView = PanelCom;
    },
		currentClose(){
			this.currentView = null;
		}
  }
})