JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@2.3.3"></script>
<div id="app">
  <span>{{ total }}</span>
  <span><input type="text" v-model.number.lazy="spent_percentage"></span>
  <span><input type="text" v-model.number.lazy="spent_dollar"></span>
  
  <pre>{{ $data }}</pre>
</div>

JavaScript

new Vue({
	el: '#app',
  data () {
    return {
      total: 1000000,
      spent_percentage: 5.0,
      spent_dollar: 20000,
      mutex: false,
      vendor: {
      	purchases: 2358,
        regional_forecast_dollar: 1
      }
    }
  },
  watch: {
  	spent_percentage: function(value, old_value) {
    	if (!this.mutex) {
      	this.mutex = true
        
        this.spent_dollar = (this.vendor.purchases * value) / 100;
        this.spent_percentage = value;
        
      	this.mutex = false
      }
    },
  	spent_dollar: function(value, old_value) {
    	if (!this.mutex) {
      	this.mutex = true
        
        this.spent_dollar = value;
        this.spent_percentage = (value / this.vendor.purchases) * 100;
        
      	this.mutex = false
      }
    }
  }
})