[Vuejs]-How to bring precision to 2 decimals and smooth input entering

I think you shouldn’t create 2 watches that will modify each other value because they could trigger each other multiple times.

I prefer to use a function that will execute when you type.

<script setup>
import {reactive, watch} from 'vue'

const data = reactive({
  first : 50000,
  second : 20000,
  percentage : ''
})

const handlePercentage = () => {
  data.second = (data.first*Number(data.percentage))/100

}

const handleSecond = () => {
  data.percentage = (Number(data.second)/data.first)*100
}
</script>

<template>
  <div>

  <div>
  <label>First</label>
  <input type="text" v-model="data.first">
  </div>

  <div style="padding: 15px 0px">
  <label>Second</label>
  <input type="text" v-model="data.second" @input="handleSecond">
  </div>

    <div>
  <label>Percentage</label>
  <input type="text" v-model="data.percentage" @input="handlePercentage">
  </div>
  </div>
</template>