Vue DHTML GRID Custom Column Type Now Working

gistfile1.txt

<template>
    <div ref="container" class="widget-box"></div>
</template>

<script>
    import fromCDN from "from-cdn";

    function eXcell_myprice(cell){ //the eXcell name is defined here
        if (cell){                 //the default pattern, just copy it
            this.cell = cell;
            this.grid = this.cell.parentNode.grid;
            eXcell_ed.call(this); //uses methods of the "ed" type
        }
        this.setValue=function(val){
            this.setCValue("<span>"+val+"</span><span> USD</span>",val);
        }
        this.getValue=function(){
            return this.cell.childNodes[0].innerHTML; // gets the value
        }
    }

    export default {
        beforeCreate: function() {
            this.ready = fromCDN([
                "//cdn.dhtmlx.com/5.1/dhtmlx.js",
                "//cdn.dhtmlx.com/5.1/dhtmlx.css"
            ]).then(()=> {
                eXcell_myprice.prototype = new eXcell;
                console.log('1');
            });
        },
        created: function () {
            this.ready.then(()=> {
                console.log('2');
            });
        },
        mounted: function () {
            this.ready.then(() => {
                console.log('3')
                console.log(eXcell_myprice.prototype instanceof eXcell)
                /* globals dhtmlXGridObject */
                var mygrid = new dhtmlXGridObject(this.$refs.container);
                mygrid.setImagesPath("//cdn.dhtmlx.com/5.1/imgs/");
                mygrid.setHeader("Author,Book title,Sales,Price", ",", []);
                mygrid.setInitWidths("200,*,150,100");
                mygrid.setColAlign("right,left,left,left");
                mygrid.setColTypes("ro,ed,dyn,myprice");
                mygrid.setColSorting("int,str,str,str");
                mygrid.init();

                var data = {
                    rows: [
                        {id: 1, data: ["A Time to Kill", "John Grisham", "100", "123"]},
                        {id: 2, data: ["Blood and Smoke", "Stephen King", "1000", "456"]},
                        {id: 3, data: ["The Rainmaker", "John Grisham", "-200", "789"]}
                    ]
                };
                mygrid.parse(data, "json");
                mygrid.selectRowById(2, true, true, true);
                console.log(mygrid.getColType(3))
            });
        }
    }
</script>