Vue.js: Binding two input to each other
<p>I'm currently starting on using vue.js, and have encountered a situation.</p>

<p>I wish to bind two inputs for example C = A - B. and B = A - C, where A is constant and a change in B or C will affect the other.</p>

<p>I successfully bind C using v-model and placing it in computed. However, when I tried the same for B, it ran into an infinite loop.</p>

<p>This should be something very simple however, I can't seem to find a solution to it.
Any help is appreciated thank you!</p>

<p>Edit: Code is included below. I wish for use the be able to key into either down_payment or loan_amount. After which it will calculate the other value automatically. However this way seems to make it go into a infinite loop</p>

<pre><code>&lt;input type="number" v-model="down_payment" class="form-control-right" placeholder="Downpayment" value="{{ down_payment }}" number&gt;
&lt;input type="number" v-model="loan_amount" placeholder="Loan Amount" value="{{loan_amount }}" number&gt;
</code></pre>

<p>My javascript</p>

<pre><code> new Vue({
    el: '#calculator',
    data: {
        asking_price: 60000,
    },
    computed: {
        loan_amount: function(){
            return this.asking_price - this.downpayment;
        },
        down_payment : function(){
            return this.asking_price - this.loan_amount;
        },
    }
 });
</code></pre>