JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div id="test" data-bind="click: $root.setPlace">
  
  </div>
</body>

JavaScript

var places = ["Place 0", "Place 1", "Place 2", "Place 3", "Place 4"];


var place = function(data) {
    this.name = ko.observable(data);
};


var ViewModel = function() {
    var self = this;

    this.locations = ko.observableArray([]);

    places.forEach(function (p) {
        newPlace = new place(p); //add var
        self.locations.push(newPlace);
    });

    currentPlace = ko.observable(this.locations()[0]);

    this.setPlace = function(aPlace){
        currentPlace(this.locations()[1]);
        
        console.log("currentPlace has been correctly updated and point to location[1]");
        console.log("currentPlace().name() = " + currentPlace().name());
        console.log("but the div has not been updated and i believe it is because it");
        console.log("has been bound to locations[0] instead of currentPlace");
        console.log("I can see that because if i update the name of locations[0] to 'FOOBAR'");
        
        this.locations()[0].name("FOOBAR");
        
        console.log("the div is updated and reflects the change.");
    };

    ko.applyBindingsToNode(document.getElementById("test"),{text: currentPlace().name});
};

ko.applyBindings(new ViewModel());