How to defeat in Vue 2 the recursion of changes in related properties - price, percent?

Question

Vue.js

Hey guys. Tell me - where to drop in Vue2.
There are 2 properties - price and percent.
Of course, they are connected by a common calculation, as well as:
We change the value of one, the value of the other immediately changes.
I pass both through watch.
When you enter in the logs, it's just tin.
It's probably recursion.
How can you fight this beast?
Is there something out of the box to use or change the logic?

I believe that you need to somehow introduce a freeze on the watch, and then return it again, but after the second change. But I don't know what the approach is called.

methods: {
   recalcPrice() {
      this.price = parseInt((this.totalPrice * this.percent) / 100)
      //...
    },
    recalcPercent() {
      this.percent = parseInt((this.price * 100) / this.totalPrice)
      //...
    },
},
watch: {
    price: function (val) {
      this.recalcPercent(val)
    },
    percent: function (val) {
      this.recalcPrice(val)
    },
 },

Answer 1

Get away from watchers and use input events and methods for recalculation