[Vuejs]-Multiple V-model Javascript Vue Js

After a day doing some research, I found a solution to have 2 v-model in one HTML DOM. Here are my solution

1. First, we need vue.component with v-model binded to computed parameter

   Vue.component('number-input', {
       props: ["value"],
       template: `
           <div>
               <input type="textarea" class="val2 bhnPrice alatPrice handsontableInput area-custom text-center text-bold" v-model="displayValue" @blur="isInputActive = false" @focus="isInputActive = true"/>
           </div>`,
       data: function() {
           return {
               isInputActive: false
           }
       },
       computed: {
           displayValue: {
               get: function() {
                   if (this.isInputActive) { 
                       return this.value.toString()
                   } else { 
                       return this.value.toFixed(0).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
                   }
               },
               set: function(modifiedValue) { 
                   let newValue = parseFloat(modifiedValue.replace(/[^\d\.]/g, "")) 
                   if (isNaN(newValue)) {
                       newValue = 0
                   } 
                   this.$emit('input', newValue)
               }
           }
       }
   }); 
   

2. Second, change HTML DOM as bellow

   <div class="handsontableInputHolder">
       <number-input style="" v-model="data.harga_satuan" v-on:keyup="change(2,index)"></number-input>
   </div>