Panel Result

The $showPanel method returns a PanelResult object.

methods: {
  showPanel() {
    const panelResult = this.$showPanel({
      component: 'your-component-name'
    });
  }
}

The PanelResult object allows you to show and hide the panel programatically.

Just store the PanelResult to your Vue component and use a method to call hide().

methods: {
  showPanel() {
    this.panelResult = this.$showPanel({
      component: 'your-component-name'
    });
  },
  hidePanel() {
    this.panelResult.hide();
  }
}

You can also call show() to re-show a panel.

methods: {
  showPanel() {
    if (this.panelResult) {
      this.panelResult.show();

      return;
    }

    this.panelResult = this.$showPanel({
      component: 'your-component-name'
    });
  }
}

The PanelResult object also contains a promise property, which is a Promise.

You can use this promise to receive data from your panel component.

methods: {
  showPanel() {
    const panelResult = this.$showPanel({
      component: 'your-component-name'
    });

    panelResult.promise
      .then(result => {
        //result is whatever you're panel component passes to this.$emit("closePanel", {})
      });
  }
}

Learn more about the passing data here.