Vue with html-renderer global function

  // Realgrid.vue
gridView.columnByName("Monetary").renderer = {
    type: "html",
    callback: function (grid, cell) {
        //
        var str = `
          <button onclick="globalFunction(${cell.index.itemIndex})">버튼1</button>
          &nbsp;
          <button onclick="globalFunction2(${cell.index.itemIndex})">버튼2</button>
        `;
        return str;
    },
};
 
created: function () {
    // eslint-disable-next-line no-undef
    functionOutsideVue(this); // function outside Vue scope called
},
 
methods: {
    callbackFunctionInsideVueComponent(itemIndex) {
        var v = gridView.getValues(itemIndex);
        alert(v.KorName);
    },
    callbackFunctionInsideVueComponent2(itemIndex) {
        var v = gridView.getValues(itemIndex);
        alert(v.Gender);
    },
},
 
window.functionOutsideVue = function (vuecomponent) {
  window.vm2 = vuecomponent;
};
 
// index.html
function globalFunction(itemIndex) {
    vm2.callbackFunctionInsideVueComponent(itemIndex);
}
function globalFunction2(itemIndex, event) {
    vm2.callbackFunctionInsideVueComponent2(itemIndex);
}