JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/aknuds1/knockout/master/build/output/knockout-latest.debug.js"></script>
<div>View model state: <span data-bind="text: state"></span>
</div>
<div data-bind="with: item">Item model state: <span data-bind="text: state"></span>
    <div data-bind="foreach: children">Child model state: <span data-bind="text: state"></span>
    </div>
</div>

CSS

body {
    margin: 20px;
}

JavaScript

function Child(item) {
    var self = this;
    self.item = ko.observable(item);
    
    self.state = ko.computed(function () {
        return self.item().state();
    });
}

function ItemModel() {
    var self = this;
    self.children = ko.observableArray();
    this.view = ko.observable();
    this.state = ko.computed(function () {
        var view = self.view();
        var state = view !== undefined ? view.state() : false;
        console.log('View: ' + view);
        if (view !== undefined) {
            console.log('State: ' + view.state());
        }
        return state;
    });

    self.setViewModel = function (view) {
        self.view(view);
    }
    
    self.children.push(new Child(self));
}

function ViewModel() {
    var self = this;
    self.state = ko.observable(false);
    self.item = new ItemModel();   
    
    setTimeout(function () {
        self.item.setViewModel(self);
        setTimeout(function () {
            self.state(true);
        }, 1000);
    }, 1000);
}

ko.applyBindings(new ViewModel());