JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div data-bind="with: ctrl1">
        <input type="text" data-bind="value:firstName, valueUpdate: 'input'"/>
        <input type="text" data-bind="value:lastName, valueUpdate: 'input'"/>
        <ul>
            <li data-bind="text:firstName"></li>
            <li data-bind="text:lastName"></li>
            <li data-bind="text:fullName"></li>
        </ul>
    </div>
    <div data-bind="with:ctrl2">
        <input type="text" data-bind="value:firstName, valueUpdate: 'input'"/>
        <input type="text" data-bind="value:lastName, valueUpdate: 'input'"/>
        <ul>
            <li data-bind="text:firstName"></li>
            <li data-bind="text:lastName"></li>
            <li data-bind="text:fullName"></li>
        </ul>
    </div>
</div>

JavaScript

var userDataContext = {
    firstName: ko.observable("John"),
    lastName: ko.observable("Doe")
    
};

function Ctrl1()
{
    var _this = this;
    _this.firstName = userDataContext.firstName;
    _this.lastName = userDataContext.lastName;
    _this.fullName = ko.computed(function() { 
        return _this.firstName() + " " + _this.lastName();
    });
    return _this;
}

function Ctrl2()
{
    var _this = this;
    _this.firstName = userDataContext.firstName;
    _this.lastName = userDataContext.lastName;
    _this.fullName = ko.computed(function() { 
        return _this.firstName() + " " + _this.lastName();
    });
    return _this;
}

setTimeout(function() {
    console.log("change firstname");
    userDataContext.firstName("Bart");
}, 3000);

ko.applyBindings({ ctrl1: new Ctrl1(), ctrl2: new Ctrl2()} );