<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    {{ message }}
	<div contenteditable="true" @keydown="inrrr" ref='t' @input='format' >
		 {{ message | phone }}
	</div>
	<input v-model="message"  @keydown="inrrr">
</div>
<script>
	Vue.filter('phone', function (phone) {
		return phone.replace(/[^0-9]/g, '')
					.replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3');
	});
	var app = new Vue({
	  el: '#app',
	  data: {
		message: '9879846513'
	  },
	  methods:{
		format(){
			this.message = this.message.replace(/[^0-9]/g, '').replace(/(\d{3})(\d{3})(\d{2})(\d{2})/, '($1) $2-$3-$4');
		},
		inrrr(event){
			var cod = event.key;
			if (cod.length == 1 && !event.ctrlKey ){ // какой-то символ
				if (/^[\d]$/.test(cod) ) { // если цифра 
					if (this.message.replace(/[^0-9]/g, '').length >9)	event.preventDefault(); 
					var vm = this;
					//if (this.message.replace(/[^0-9]/g, '').length == 9) 
					setTimeout(function(){ vm.format() } , 100);
				} else event.preventDefault();
			}
			console.log(cod , /^[\d]$/.test(cod)  , event)
		},
	  },
	  mounted(){
			this.format();
	  }
	})
</script>