Variables for Vue.js With Direct Relationship

In a single page application I'm writing, the central function has multiple points for a person to begin.

The Problem

So for instance, if you know how much coffee you want to brew you can put that in and it will give you the formula for the amount of grinds to get the best taste. But, a user should be able to start with their available amount of ground coffee as well.

From my understanding and trial and error thus far, you can't have both inputs dependent upon the input of one another. If you want to see a working example, I put the project live here.

If you adjust the amount of coffee you'd like to brew, it'll spit out the required grounds just fine. However, if you work the other way and try to change the grounds, it should adjust the amount of brewed coffee and the rest of the formula as well.

The Inputs

So for every cup of coffee the finished, drinkable amount is $requiredGrounds*(50/3).

Note: 50/3 is the extraction ratio and it is constant unless I change that later.

The opposite mathematical function is used to derived the required amount of coffee grounds: $totalBrewedContent/(50/3).

The Code

var calculator = new Vue({
el: '#calculator',
data: {
    totalBrewedContent: 200,
},
computed: {
    requiredGrounds: function(){
        return this.totalBrewedContent/(50/3)
    },
    totalBrewTime: function(){
        return this.requiredGrounds*10;
    },
    bpTime: function(){
        return this.totalBrewTime*(1/4);
    },
    mpTime: function(){
        return this.totalBrewTime*(1/4);
    },
    tpTime: function(){
        return this.totalBrewTime*(1/2);
    },
    bpWater: function(){
        return this.totalBrewedContent*(1/4);
    },
    mpWater: function(){
        return this.totalBrewedContent*(1/4);
    },
    tpWater: function(){
        return this.totalBrewedContent*(1/2);
    }
  }
})