JSFiddle - React, Tailwind, and code Playground

HTML

<div style="padding: 15px; margin: 5px; border: 1px solid #DDD;" 
    data-bind="template: { name: template, data: data, afterRender: afterRender }"></div>

<script type="text/html" id="model1">
    <h2>Model #1</h2>
    <hr>
    <font color="red" data-bind="text: name1"></font>
</script>

<script type="text/html" id="model2">
    <h2>Model #2</h2>
    <hr>
    <font color="red" data-bind="text: name2"></font>
    <font color="red" data-bind="text: lastname"></font>
</script>

<script type="text/html" id="model3">
    <h2>Model #3</h2>
    <hr>
    <font color="red" data-bind="text: name3"></font>
</script>

<button data-bind="click: recheckData">re Check On Model1</button>
<button data-bind="click: recheckData2">re Check  On Model2</button>
<button data-bind="click: recheckData3">re Check  On Model3</button>

JavaScript

function model1 (name) {
    this.name1 = name;
    
    this.template = "model1";
}


function model3 (name) {
    this.name3 = name;
    
    this.template = "model3";
}

function model2 (name, lastname) {
    this.name2 = name;
    //this.lastname = lastname; // trigger error binding!
        
    this.template = "model2";
}

var viewModel = {
    data: ko.observable({}),
    template: function() {
        return viewModel.data().template || 'model1'; 
    },
    
    afterRender: function () {
        ///alert('sdfsdf');                    
    },
    
    recheckData2: function() {
        try {
            viewModel.data(new model2('zahar', 'zahar'));      
        } catch(e) {
           //viewModel.data(new model1('zoh'));  
        }        
    },
    
    recheckData3: function() {        
        viewModel.data(new model3('IVAN'));  
    },
    
    recheckData: function() {        
        viewModel.data(new model1('zoh'));  
    }
};


viewModel.data(new model1('zoh'));

ko.applyBindings(viewModel);