JSFiddle - React, Tailwind, and code Playground

HTML

<script id="template1">
    <div data-bind="text:x1"></div>
    <div data-bind="text:x2"></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;
});
vm.x1=ko.recompute(function(){
    return vm.symbolsLength()+'x1';
});
vm.x2=ko.recompute(function(){
    return vm.symbolsLength()+'x2';
});
ko.applyBindings(vm);