JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<div data-bind="text: ko.toJSON($data)"></div>

JavaScript

ChildViewModel = function(data) {
    ko.mapping.fromJS(data, {}, this);
    this.computProp = ko.computed(function() {
        return this.name() + this.status();
    }, this);
};

var data = [{
    name: "name1",
    items:[
        {
        name:"name11",
        subItems:[{
                name:"name111",
            children:[
                    {id:1,name:"child1111",status:"good"},
                    {id:2,name:"child1112",status:"bad"},
                    {id:3,name:"child1113",status:"good"}
                ]},
                {
                name:"name112",
                    children:[
                    {id:4,name:"child1121",status:"good"}]
                }]
        },
        {
        name:"name12",
        subItems:[{
                name:"name121",
            children:[
                    {id:5,name:"child1211",status:"bad"}]
                }]
        }]
    },
    {
    name: "name2",
    items:[
        {
        name:"name21",
        subItems:[{
                name:"name111",
            children:[
                {id:7,name:"child2111",status:"good"}
                ]}]
        }]
    }];

var mapping = {
                children: {
                    create: function(options) {
                        return new ChildViewModel(options.data);
                    }
                }

};

var viewModel = ko.mapping.fromJS(data, mapping);
ko.applyBindings(viewModel);