Custom Handling of User Input

<div id="vueapp" class="vue-app">
 <div className="example-wrapper row">
                <div class="col-xs-12 col-sm-12 example-col">
                    <label>
                        <custom-provider-hex :locale="'en'">
                            <numerictextbox v-model="value">
                            </numerictextbox>
                             HEX
                        </custom-provider-hex>
                    </label>
                </div>
                <div class="col-xs-12 col-sm-12 example-col">
                    <label>
                        <numerictextbox :format="'n0'" v-model="value"></numerictextbox>
                        DEC
                    </label>
                </div>
            </div>
</div>

import { NumericTextBox } from '@progress/kendo-vue-inputs';
import { IntlProvider } from '@progress/kendo-vue-intl'

let CustomProviderHEX = {
        extends: IntlProvider,
        methods: {
        getChildContext() {
            const childContext = {
                kendoIntlService: this.getIntlService()
            };
            childContext.kendoIntlService.formatNumber = function (dec) {
                return (dec !== null) ? Math.floor(dec).toString(16) : '';
            };
            childContext.kendoIntlService.parseNumber = function (hex) {
                return parseInt(hex, 16);
            };
            return childContext;
        }
    }
};
Vue.component('numerictextbox', NumericTextBox);
Vue.component('custom-provider-hex', CustomProviderHEX);

new Vue({
    el: '#vueapp',
    data: function(){
        return {
            value: 11256099
        };
    }
});