JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<div id="test">
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
<div class='liveExample'>
    <!-- ko foreach: $data.Data.DataArray -->
    <span data-bind="text:Title"></span>
    <!-- /ko -->
    <hr />
    <!-- ko foreach: $data.DataArray -->
    <span data-bind="text:Title"></span>
    <!-- /ko -->
    </div>
<input type="button" value="add" data-bind="click:add">
<input type="button" value="load data" data-bind="click:loaddata">
    </div>

JavaScript

// Here's my data model
var viewModel = {
        Data: ko.observable(),
        DataArray: ko.observableArray([]),
    loaddata:function(){
        this.Data({
            BaseData:{
                Title:'BaseDataTitle',
                DataArray:[{Title:'obs1'}],//this should be observable
                SecondArray:[{Title:'notobs1'}],//this should not be observable
            },
            DataArray:[{Title:'obs1'}]
        }
        );
    },
    add:function(){
        this.DataArray().push({Title:'obs'+this.DataArray().length});
        this.Data().DataArray.push({Title:'obs'+this.DataArray().length});
        
        
        this.Data().BaseData.DataArray.push({Title:'obs2'});
        this.Data().BaseData.SecondDataArray.push({Title:'obs2'});
    }
};



ko.applyBindings(viewModel); // This makes Knockout get to work