JSFiddle - React, Tailwind, and code Playground

HTML

<script id="template1">
    <div data-bind="text:symbolsLength"></div>
</script>
<script id="template2">
    static html
</script>
<input data-bind="value:symbols, valueUpdate: 'afterkeydown'" />
<button data-bind="click:click">Change Template</button>
<div data-bind="template:templateName"></div>

JavaScript

ko.recompute=function(callback){
		var rez=function(){
            return rez.val();
		};
		rez.__ko_proto__=ko.observable;
		var o={
			deferEvaluation:true,
			read:function(){
				var s=rez.val.getSubscriptionsCount()==0;
				var d=rez.val.getDependenciesCount()==0;
				if(s!=d) {
					setTimeout(function(){
						rez.val.dispose();
						rez.val=ko.computed(o);
					},1);
					return null;
				}
				return callback();			
			}
		};
		rez.val=ko.computed(o);
		return rez;
	};


var vm={
    symbols:ko.observable('три'),
    templateName:ko.observable('template1'),
    click:function(){
        vm.templateName(
            (vm.templateName()=='template1')?
            'template2':
            'template1'
        );
    }
};
vm.symbolsLength=ko.recompute(function(){
    alert(1);
    return vm.symbols().length;
})

ko.applyBindings(vm);