Model Change Not Propagating Thru DOM Binding

var Model = require('ampersand-model');
var View = require('ampersand-view');
var domready = require('domready');

var MyModel = Model.extend({
    props: {
        id: {
            type: 'integer',
            default: null
        }
    },
    children: {
        child: Model
    }
});

var modelA = new MyModel();
modelA.child = new MyModel({id: 503});

console.log(modelA.child.id);


var MyView = View.extend({
    template: '<div id="root"><textarea data-hook="log"></textarea>' + 
    '<div data-hook="dummy"></div></div>',
    bindings: {
        'model.child.id': { // details is a child state
            type: 'text',
            hook: 'dummy'
        }
    },
    events: {
        'keyup [data-hook=log]': 'handleLogChange'
    },
    render: function() {
        this.renderWithTemplate();
    }
});

MyView.prototype.handleLogChange = function(evt) {
    this.model.child.id = this.model.child.id + 1; // TODO DEBUG WHY IS BINDING NOT UPDATING
};

module.exports = MyView;

domready(function() {
    var myView = new MyView({
        el: window.document.getElementById('sandbox'),
        model: modelA
    });
    myView.render();
});

HTML sourcing in the browserified file posted above