VUE 2 компонент с render функцией и компонент с template рендерятся по-разному
 

Имеем 2 компонента текстового инпута, делающих одно и тоже (подрезают введенное значение до длины 10 символов) разница только в отрисовке:

Vue.component('input-r',{
	data: function() {
		return {
			v:''
		}
	},
	created:function(){
		this.v=this.checkValue(this.value);
	},
	methods:{
		checkValue:function(value){
			return (value.length > 10) ? value.substr(0,10) : value;
		}

	},
	props:{
		value:{
			required:false,
			default:''
		}
	},
	watch:{
		value:function(){
			this.v=this.checkValue(this.value);
		},
		v:function(){
			this.$emit('input',this.v);
		}
	},
	render:function(createElement){
		let self=this;
		return createElement(
			'input',{
				attrs:{
					type:'text'
				},
				domProps:{
					value:self.v
				},
				on:{
				   	input:function(e){self.v = self.checkValue(e.target.value)}
				}
			}
		);
	}
});

и

Vue.component('input-t',{
	data: function() {
		return {
			v:''
		}
	},
	created:function(){
		this.v=this.checkValue(this.value);
	},
	methods:{
		checkValue:function(value){
			return (value.length > 10) ? value.substr(0,10) : value;
		}

	},
	props:{
		value:{
			required:false,
			default:''
		}
	},
	watch:{
		value:function(){
			this.v=this.checkValue(this.value);
		},
		v:function(){
			this.v=this.checkValue(this.v);
			this.$emit('input',this.v);
		}
	},
	template:`
		<input type="text" v-model="v">
	`
});

DEV-Tools-ы говорят, что в обоих компонентах 'обрезка' срабатывает при каждом событии input.
Однако input-t перерисовывается при каждом событии input и в поле ввода больше 10 знаков не отображается, а input-r перерисовывается подрезанным до 10 символов только после потери фокуса

Вот и вопросы: почему так? и как заставить input-r работать также, как input-t?