JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<div data-bind="with: data">
    <p>Name:
        <span data-bind="text: details.name"></span>
    </p>
    <p>Surname:
        <input data-bind='value: details.surname' />
    </p>
    <p>Other:
        <input data-bind='value: details.othername' />
    </p>
</div>

JavaScript

// Here's my data model
var ViewModel = function () {
    this.data = ko.observable();
    var sample = {
        id: 1,
        details: {
            name: "Johnny",
            surname: "Boy",
            othername: ""
        }
    };

    this.data(sample);
    
    //This does not work
   // this.data().details.name.subscribe(function (val) {
        
   // });
};

ko.applyBindings(new ViewModel());