Call vue method from inside kendo-ui grid col template - vue.js

Question

I am trying to call a component method from inside a Kendo-UI grid column template, but I am getting a reference error. The problem is I have some global text formatting functions that I would like to share as a mixin. Is there anyway to call a vue component method from inside a grid col template?
<template>
<div>
<kendo-datasource ref="emailAccountDS"
:transport-read-url="'api/EmailAccounts'"
:transport-read-data-type="'json'"
:transport-read-type="'get'"
:type="'aspnetmvc-ajax'"
:schema-data="'data'"
:schema-total="schemaTotal"
:schema-model-id="'id'"
:schema-model-fields="schemaModelFields"
:server-paging= "true"
:server-sorting="true"
:server-filtering="true"
:page-size="25"
>
</kendo-datasource>
<kendo-grid :data-source-ref="'emailAccountDS'"
:pageable-always-visible="false"
:pageable-refresh="true"
:selectable="'row'"
:sortable="true"
:filterable="true"
:auto-bind="true"
:editable="'popup'"
:toolbar="['create','edit']">
<kendo-grid-column field="hostName" title="Host Name"></kendo-grid-column>
<!-- ReferenceError: testMethod is not defined -->
<kendo-grid-column field="accountType" title="Account Type" template="# testMethod(accountType) #"></kendo-grid-column>
<kendo-grid-column field="port" ></kendo-grid-column>
<kendo-grid-column field="useSsl"></kendo-grid-column>
<kendo-grid-column field="username"></kendo-grid-column>
</kendo-grid>
</div>
</template>
<script>
export default {
name: 'EmailAccounts',
data: function () {
return {
schemaModelFields: {
id: { type: 'number', editable: false, nullable: true },
isEnabled: { type: 'boolean', defaultValue: true, validation: { required: true } },
hostName: { type: 'string', validation: { required: true } },
port: { type: 'number', defaultValue: 995, validation: { required: true } },
useSsl: { type: 'boolean', defaultValue: true, validation: { required: true } },
username: { type: 'string', validation: { required: true } }
}
}
},
methods: {
testMethod(accountType) {//<=== ReferenceError: testMethod is not defined
return "foo";
},
schemaTotal: function (response) {
return response.total;
}
}
};
</script>
<style>
</style>
I have setup a plunker here that shows the same error.
I found this thread that said this should be working since 2018.1. This is version of kendo-ui I am running.
"dependencies": {
"#progress/kendo-datasource-vue-wrapper": "^2018.2.516",
"#progress/kendo-grid-vue-wrapper": "^2018.2.516",
"#progress/kendo-layout-vue-wrapper": "^2018.2.516",
"#progress/kendo-theme-default": "^2.53.1",
"#progress/kendo-treeview-vue-wrapper": "^2018.2.516",
"#progress/kendo-ui": "^2018.2.516",
"axios": "^0.18.0",
"element-ui": "^2.3.3",
"jquery": "^2.2.4",
"popper.js": "^1.13.0",
"vue": "^2.5.11",
"vue-awesome": "^2.3.5",
"vue-router": "^3.0.1",
"webpack-hot-middleware": "2.21.2"
},

Answer 1

Problem is that kendo template (with "# something #") "compiles" inside kendo code and there is no reference to your Vue app.
But in jquery-kendo docs I found that you can pass function to template. As I can see in kendo source code template function always should return not null/undefined value. So I added changes below and it works like a charm:
Changes in Vue template(bind template attr to function) <kendo-grid-column field="UnitsInStock" title="Units In Stock" :template="isInStock" :width="120"></kendo-grid-column>
Changes in Vue component code (slightly changed isInStock method to expect current data item object as in docs and made it always returns value):
isInStock: function(dataItem){
if(dataItem.UnitsInStock < 0 || !dataItem.UnitsInStock){
return "Out of stock";
}
return dataItem.UnitsInStock;
}