Binding Computed to Data

Trying to figure out how to bind the returned results of a computed property to the data object in a less hacky way.

by aka_SKIff

HTML

<div id="app">
	<div>
		<input v-model="width" type="digits" placeholder="width">
		<input v-model="length" type="digits" placeholder="length">
	</div>
	<div>
		<h1>
		The width is: {{ width }}
		</h1>
		<h1>
		The length is: {{ length }}
		</h1>
		<input v-model="sqFeet" :value="sf" type="digits" disabled hidden>
		<h1>
		{{sqFeet}}
		</h1>
	</div>
	
</div>

JavaScript

new Vue({
	el: '#app',
	data: {
		width: '',
		length: ''
	},
	computed: {
		sqFeet: function() {
	    return this.width * this.length;
		}
	}
})