Vue textarea @keyup.ctrl.xyz

@keyup.ctrl.{keyCode} @input =>oninput

<script src="https://unpkg.com/vue"></script>
<div id="bbb" :class='c'>
 <textarea 
@keyup.ctrl.13='fred'
 @keyup.ctrl.37='forange'
 @keyup.ctrl.38='fblue'
 @keyup.ctrl.39='fpink'
 @keyup.ctrl.40='fgray'           
 @input='finput'           
           >{{help}}</textarea>
</div>
<!------------------------>
<style>
 textarea{width:33rem;height:6rem;}
#bbb{transition:background-color 0.3s ease-in-out;}
.red{background-color:red}
.orange{background-color:orange}
.blue{background-color:blue}
.pink{background-color:pink}
.gray{background-color:gray}
</style>

new Vue({
 el:'#bbb'
 ,data:{c:'blue',help:'color change is ctrl+enter,ctrl+ 4arrow key'}
 ,watch:{//v-model:x is watch the x
  //v:function(n,o){this.check(n,o)}
 }
 ,methods:{
  fred:function(ev){ this.c='red' }
  ,forange:function(ev){this.c='orange' }
  ,fblue:function(ev){this.c='blue' }
  ,fpink:function(ev){this.c='pink' }
  ,fgray:function(ev){ this.c='gray'}
  ,finput:function(ev){
   console.log(ev)
  }
 }
})

追記 contenteditable も同様

 <div contenteditable="plaintext-only"           
@keyup.ctrl.13='fred'
 @keyup.ctrl.37='forange'
 @keyup.ctrl.38='fblue'
 @keyup.ctrl.39='fpink'
 @keyup.ctrl.40='fgray'
 @input='finput'           
           >{{help}}</div>

省略記法の挙動

//work!
<div...  v-on="{
input:finput
      }">

//dont work! json . is error. keyup[.]<---
v-on="{ keyup.ctrl.13 :fred
      ,keyup.ctrl.38 :fblue
      ,keyup.ctrl.39 :fpink
      ,keyup.ctrl.40 :fgray
}"