JSFiddle - React, Tailwind, and code Playground

HTML

<div data-bind="click:go,text:(clickCount()==0)?'click once then take a heap snapshot':'click me lots then take another heap snapshot to compare'" style="cursor:pointer"></div>

<ul data-bind="foreach:array">
    <div data-bind="text:$data.name"></div>
    <div data-bind="text:$data.age"></div>
</ul>

JavaScript

var getJoes = function(){
    var joes=[];
    for(var i=0;i<10;i++)
    {
        var name="Joe";
        var age=((Math.random()*10)+1)>>0;
        joes.push({Name:name,Age:age});
    }
    return joes;
};
function viewModel(){
    var self=this;
    self.array = ko.observableArray();
    self.clickCount=ko.observable(0);
    self.go = function(){
        self.clickCount(self.clickCount()+1);
        self.array.removeAll();
        var joes=getJoes();
        joes.forEach(function(joe){
                var joeObs = ko.observable({
                    name:ko.observable(joe.Name),
                    age:ko.observable(joe.Age)});
                self.array.push(joeObs);
            });

    };         
}
ko.applyBindings(new viewModel());