title: vuejs form computed property
body: <p>I have a simple form in VueJS that I would like to have a computed property for one of the form fields. I would like the computed property to be calculated as the user inputs data and then saved as a data property before submitting the form to the server.</p>
  
  <pre class="lang-html prettyprint-override"><code> &lt;form&gt;
      &lt;div&gt;
        &lt;h3&gt;Revenue&lt;/h3&gt;
        &lt;input type="text" v-model="formData.revenue"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;h3&gt;Expenses&lt;/h3&gt;
        &lt;input type="text" v-model="formData.expenses"&gt;
      &lt;/div&gt;
      &lt;div&gt;
        &lt;h3&gt;Operating Income&lt;/h3&gt;
        &lt;input type="text" v-model="formData.operatingIncome"&gt;
      &lt;/div&gt;    
    &lt;/form&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre class="lang-js prettyprint-override"><code>new Vue({
    el: '#app',
    data: {
      formData: {}
    },
    computed: {
      operatingIncome() {
        return this.formData.revenue - this.formData.expenses;
      }
    }
  });
  </code></pre>
  
  <p>The computed property for <code>operatingIncome</code> does not calculate unless I explicitly create properties for <code>revenue</code> and <code>expenses</code> within the <code>formData</code> data object and change the <code>&lt;input&gt;</code> to a string interpolation. Any suggestions on how to make this work?</p>