JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<select data-bind="options: families,
                   optionsText: 'name',
                   value: selectedFamily"></select>

<!-- ko with: selectedFamily -->
    <button data-bind="click: $root.addChild">Add Child</button>
    <button data-bind="click: $root.resetChildren">Reset Children</button>
<!-- /ko -->

<div data-bind="foreach: { data: families, as: '$family' }">
    <h1><span data-bind="text: $family.name"></span><span data-bind="visible: $family.isSelected">| Selected!</span></h1>
    
    <ul data-bind="foreach: { data: children, as: '$child' }">
        <li>
            <span data-bind="text: $child.firstName"></span>
            <span data-bind="text: $family.name"></span>
        </li>
    </ul>
</div>

JavaScript

function Family (name) {
    var family = this;
    
    family.name = ko.observable(name || "");
    family.children = ko.observableArray();
    family.isSelected = ko.observable();
}

function Person(data) {
    var person = this;
    data = data || {};
    
    person.firstName = ko.observable(data.firstName);
    person.lastName = ko.observable(data.lastName);
    person.fullName = ko.computed(function () {
        return person.firstName() + " " + person.lastName();
    });
}

function ViewModel () {
    var self = this;
    
    self.families = ko.observableArray([
        new Family("Smith"),
        new Family("Jones"),
        new Family("Brown")
    ]);
    
    self.selectedFamily = ko.observable();
    self.selectedFamily.subscribe(function (oldValue) {
        if (oldValue) {
            oldValue.isSelected(false);
        }
    }, null, 'beforeChange');
    self.selectedFamily.subscribe(function (newValue) {
        if (newValue) {
           newValue.isSelected(true);
        }
    });
    
    self.addChild = function (family) {
        family.children.push(new Person({ firstName: "Frank", lastName: family.name() }));
    };
    
    self.resetChildren = function (family) {
        family.children([]);
    };
}

ko.applyBindings(new ViewModel());