شخصی سازی پلاگین‌های tui.editor نسخه vuejs

در لینک زیر نمونه کدی هست که یکی از پلاگین‌های toast-ui را شخصی سازی کرده ولی به بصورت ساده با جاوا اسکریپت.

tutorial-example15-customizing-toolbar-buttons (Plain JavaScript component)

ولی من میخوام این کار رو در Vue انجام بدم و تا یک قسمتی هم انجام دادم ، کد زیر :

import '@toast-ui/editor/dist/toastui-editor.css'
import { Editor } from '@toast-ui/vue-editor'

export default {
  name: 'TextEditor',
  methods:{
      createLastButton: function(){
        const button = document.createElement('button');

        button.className = 'toastui-editor-toolbar-icons last';
        button.style.backgroundImage = 'none';
        button.style.margin = '0';
        button.innerHTML = `<i>Bold</i>`;
        button.addEventListener('click', () => {
          Editor.exec('bold');
        });

        return button;
      },
  },
  data () {
    return {
      editorText:'',
      editorOpttions:{
          minHeight: '200px',
          language: 'en-US',
          useCommandShortcut: true,
          usageStatistics: true,
          hideModeSwitch: false,
          toolbarItems: [
            ['heading', 'bold', 'italic', 'strike'],
            ['hr', 'quote'],
            ['ul', 'ol', 'task', 'indent', 'outdent'],
            ['table', 'image', 'link'],
            ['code', 'codeblock'],
            ['scrollSync'],
            // Using Option: Customize the last button
            [{
              el: this.createLastButton(),
              command: 'bold',
              tooltip: 'Custom Bold'
            }]
          ]        
      },
    }
  },
  components: {
    'editor': Editor
  },
};

ولی نمیدونم کد زیر در vue به چه صورت پیاده سازی میشه !

      editor.insertToolbarItem({ groupIndex: 0, itemIndex: 0 }, {
        name: 'myItem',
        tooltip: 'Custom Button',
        command: 'bold',
        text: '@',
        className: 'toastui-editor-toolbar-icons first',
        style: { backgroundImage: 'none' }
      });