Vue Component Wrapping <input>

inputtext.js

Vue.component( 'inputtext' , {
    template:'<input type="text" :value="value" @input="input($event.target.value)" @change="change" @keyup="keyup" @keypress="keypress" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" >',
    props:['value'],
    methods:{
        input( newInput ){
            this.$emit('input', newInput);
        },
        change(){
            //console.log( 'change: ' + this.value );
            if( this.$el.maxlength && this.$el.value.length > this.$el.maxlength ){
                this.$el.value = this.$el.value.slice( 0 , this.$el.maxlength );
            }
        },
        keyup(){
            //console.log( 'keyup: ' + this.value );
            if( this.$el.maxlength && this.$el.value.length > this.$el.maxlength ){
                this.$el.value = this.$el.value.slice( 0 , this.$el.maxlength );
            }
        },
        keypress(){
            //console.log( 'keypress: ' + this.value );
            if( this.$el.maxlength && this.$el.value.length >= this.$el.maxlength ){
                return false;
            }
            return true;
        }
    }
})