JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/xdenser/knockout-component/raw/master/knockout.component.js"></script>
<script src="https://github.com/xdenser/kc-tree-habr/raw/master/tree.js"></script>
<button data-bind='click:AddRootNode'>Add New Root Node</button>
<!-- ko with: tree -->
<button data-bind='click:$parent.AddChildNode,visible: selectedNode'>Add Child toSelected Node</button>
<button data-bind='click:$parent.RemoveNode,visible: selectedNode'>Delete Selected Node</button>
<!-- /ko   -->
<div data-bind='kc.treeView: {data:data,map:{caption:"name",children:"list"}},kc.assign:tree'></div>

<div data-bind='with: tree().selectedNode'>
    <!-- ko with: data -->
        <input data-bind='value:name'>
    <!-- /ko   -->
</div>

JavaScript

function SomeObject(col){
    this.name = ko.observable('New SomeObject');
    this.list = ko.observableArray();
    this.collection = col;
    
}

var vm = {
    data:ko.observableArray(),
    AddRootNode: function(){
      this.data.push(new SomeObject(this.data));
    },
    AddChildNode: function(){
        var data = vm.tree().selectedNode().data;
        data.list.push(new SomeObject(data.list));
    },
    RemoveNode:function(){
        var data = vm.tree().selectedNode().data;
        vm.tree().selectedNode(null);
        data.collection.remove(data);
    },
    tree:ko.observable(),
  };
var arr=[];
for(var i=0;i<10;i++){
    var o1 = new SomeObject(vm.data);
    var arr1 = [];
    
  for(var j=0;j<30;j++){
        var o2 = new SomeObject(o1.list);
        var arr2 =[];
        for(var k=0;k<5;k++){
            arr2.push(new SomeObject(o2.list));
        }
        o2.list(arr2);
        arr1.push(o2);
    }     
    o1.list(arr1);
    arr.push(o1);
}


ko.applyBindings(vm);
vm.data(arr);