knockout.js - このノックアウト配列が DOM で更新されないのはなぜですか?

Question

私のviewModelからのJS:

 self.newInterests = ko.observableArray();

 self.saveNewInterest = function () {
    // construct data and send to server
    var payload = {
        // data defined here
    };
    var appendInterest = function(newInterest) {
        self.newInterests().push(newInterest);
    };
    interestservice().addInterest(payload, appendInterest);
    self.closeModal();
 };

Interestservice.addInterest:

var addInterest = function (payload, callback) {
    loadAnimate();
    var options = {
        url: apiEndpoint + 'interest',
        type: 'POST',
        dataType: 'json',
        data: payload,
        xhrFields: {
            withCredentials: true
        }
    };
    return $.ajax(options)
        .done(function (response) {
            toastr.success("Interest Added", "Success");
            callback(response);
        })
        .fail(function (msg) {
            toastr.error("Could not add interest.", "Error");
        }).complete(function () {
            loadComplete();
        });
};

私からしてみれば：

<h3 data-bind="text: newInterests().length"></h3>
<div data-bind="foreach: newInterests()">
    <p>new interest!</p>
</div>

newInterests() 配列をデータで初期化すると、DOM に表示されます。デバッグすると、サーバーからのデータが配列に追加されていることがわかりますが、何らかの理由でビューのバインディングが更新されていません。何が起こっているのか分かりますか？