Use in vue format

Question

When I use the code, I cannot use the variable or method in the export default in the external custom button click listener. Is there a way to put the external function inside the export default or use the variable, method of vue? I would appreciate it if you could let me know the solution.

var CustomButton = function (props) {
  let div = document.createElement('div');
  var el = document.createElement('button');
  el.innerHTML = '<span class="v-btn__content">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i aria-hidden="true" @click="plateView()" class="v-icon notranslate v-icon--left mdi mdi-file-find blue--text text--darken-2 theme--light"></i></span>';

  const { grid, rowKey, columnInfo } = props;
  el.addEventListener('click', () => {

  });
  el.style.width = 'calc(100% - 10px)';
  div.appendChild(el);
  
  this.el = div;
  this.render(props);
}

CustomButton.prototype.getElement = function () {
    return this.el;
}
CustomButton.prototype.getValue = function () {
    return this.el.value;
}
CustomButton.prototype.render = function (props) {
    this.el.value = props.value;
}

export default {
  components: {
    grid: Grid
  },
  props: ['title','data','columns','footerButton', 'footerDeleteButton'],
  data: () => ({
   
    gridProps: {
      bodyHeight: 450,
      pageOptions: {
        type: 'scroll',
      },
      columnOptions: {
        resizable: true,
        frozenCount: 1
      },
      header: {
        height: 30,
      },
      columns: [
        {
          header: 'Plate',
          name: 'plateView',
          width: 70,
          align: 'center',
          renderer: {
            type: CustomButton,
          },
        },
      ],  
      data: [
        {
          plateName: '2022-04-21_Set-1',
          plateType: '96Well(12x8)',
          createDate: '2022-01-11 01:01:49',
          downloadDate: '2022-01-11 03:01:50',
        },
       
      ],
     
      },
      options: {
        rowHeaders: ['checkbox', 'rowNum'],
        
      }
     },
  }),
  computed: {
    // window: () => window,
    // console: () => console,
    // CustomButton: () => CustomButton,
  },
  methods: {
    plateView(props) {
      console.log(this.plateDialog)
      this.plateDialog = true;
      console.log(props)
    },
  },
  
}

For example, I want to invoke the plateView method from an external custom button click event.

If the file name is plate.vue, the method call to plate.plateView succeeded by declaring "import plate from './plate.vue'", but failed to get the value of the variable in export default data in vue.