JSFiddle - React, Tailwind, and code Playground

HTML

<script id="t1" type="text/html">
    <li>T1: <span data-bind="text: subO"></span> <span data-bind="text: new Date().toString()"></span></li>
</script>

<ul data-bind="template: { name: 't1', foreach: o }">
</ul>
<button data-bind="click: update">Update Item 1</button>

JavaScript

var ViewModel2 = function () {
    var vm = {};
    
    vm.subO = ko.observable();

    return vm;
};
    
var ViewModel = function () {
    var vm = {}, i = 0;

    vm.o = ko.observableArray([]);
    
    vm.update = function () {
        i+=1;
        vm.o()[0].subO("Updated: " + i);
    };

    return vm;
};

var vm = ViewModel();
var vm2 = ViewModel2();
var vm3 = ViewModel2();
var vm4 = ViewModel2();
    
vm2.subO("Foo1");
vm3.subO("Foo2");
vm4.subO("Foo2");
    
vm.o.push(vm2);
vm.o.push(vm3);
vm.o.push(vm4);

ko.applyBindings(vm);