How to use the material-components-web.dialog.MDCDialog function in material-components-web

$onInit() {
    this.formPanel = new dialog.MDCDialog(this.$element.find('.form-create-panel')[0]);
    this.formPanel.listen('MDCDialog:closing', event => {
      if (event.detail.action !== 'close') {
        this.onFormCreateClose({form: this.form});
      }
    });

    this.formPanel.listen('MDCDialog:opening', () => {});
  }

mounted () {
    this.dialog = new dialog.MDCDialog(this.$el)
    textField.MDCTextField.attachTo(this.$el.querySelector('.mdc-text-field'))
    Event.$off('episodeDialog.show').$on('episodeDialog.show', this.show)
    Event.$off('episodeDialog.close').$on('episodeDialog.close', this.close)
    this.dialog.focusTrap_.activate = () => {
      this.$el.querySelector('input#name').select()
    }
  },
  methods: {

mounted () {
    this.dialog = new dialog.MDCDialog(this.$el)
    textField.MDCTextField.attachTo(this.$el.querySelector('.mdc-text-field'))
    Event.$off('programDialog.show').$on('programDialog.show', this.show)
    Event.$off('programDialog.close').$on('programDialog.close', this.close)
    this.dialog.focusTrap_.activate = () => {
      this.$el.querySelector('input#name').select()
    }
  },
  methods: {