JSFiddle - React, Tailwind, and code Playground

HTML

a<input type="text" data-bind="value: a" /><br>
b<input type="text" data-bind="value: b" /><br>

data: <span data-bind="text: data"></span><br>

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

JavaScript

var model = {
    a: ko.observable(),
    b: ko.observable(),
    c: ko.observable(2),
    data: ko.observable('')
};


model.query = ko.computed(function () {
	  console.log("query" + this.a());
    console.log("query" + this.b());
    console.log("query" + this.c());
    return parseFloat(this.a()) + parseFloat(this.b()) + parseFloat(this.c());
}, model);

model.query.subscribe(function (query) {
    console.log(query);
    if (!query) {
        this.data('no value'); 
        return;
    }
    // load some data...
    this.data(query);    
}, model);

ko.applyBindings(model);