Knockout nested observables

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-debug.js"></script>
<div>
    <input type="text" data-bind="value: student().firstName" />
    <input type="text" data-bind="value: student().lastName" />
    <span data-bind="text: fullName"></span>
    <pre data-bind="text: ko.toJSON($data, null, 2)"></pre>
</div>

JavaScript

function Student(id) {

var self = this; 

    self.studentId = ko.observable(id);
 
    self.firstName = ko.observable("");
    self.lastName = ko.observable("");
}
var StudentModel = function () {
    var self = this;

    // TODO: replace it with actual login. 
    self.login= ko.observable("cmak");
    self.isNew = ko.observable(true);

    // message
    self.messageType = ko.observable("messageNone");
    self.message = ko.observable("");

    self.student = ko.observable(new Student(0));
};

var viewModel = new StudentModel();

ko.applyBindings(viewModel);