JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<ul data-bind="foreach: peoples">
    <li>
        <span data-bind="text: name"></span>
        <span>имеет <b data-bind="text: childrens().length"></b> детей</span>
        <a href="#" data-bind="click: addChildren">Родить еще</a>
        <ul data-bind="foreach: childrens">
            <li>
                <span data-bind="text: $index"></span>
                <span data-bind="text: $data"></span>
                <a href="#" data-bind="click: $parent.removeChildren">Убить</a>
            </li>
        </ul>
    </li>
</ul>

JavaScript

var People = function(name, childrens) {
        var t = this
        this.name = name
        this.childrens = ko.observableArray(childrens)
        this.addChildren = function() {
            t.childrens.push('Новый ребеночек')
        }
        this.removeChildren = function(children) {
            t.childrens.remove(children)
        }
    }

    var viewModel = {
        peoples: [
            new People('Наташа', ['Антон', 'Вася', 'Михаил']),
            new People('Оля', ['Ирина', 'Володя', 'Дулат']),
            new People('Вероника', ['Гриша', 'Паша', 'Даша', 'Маша'])
        ]
    }

    ko.applyBindings(viewModel)