ko mapping toJS bug: empty array items

ko.mapping.toJS generated empty array items if viewmodel (with an array element) is updated with ko.mapping.fromJS and the new array element's length is longer than the old one.

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<script src="https://github.com/SteveSanderson/knockout.mapping/raw/master/build/output/knockout.mapping-latest.js"></script>
<span>Text:</span><input type="text" data-bind="value: data.text" />
<span data-bind="text: data.text"></span><br />
<ul data-bind="foreach: data.arr">
    <li><span data-bind="text: key"></span>:
        <span data-bind="text: value"></span></li>
</ul>
<button data-bind="click: load">Load</button>
<button data-bind="click: change">Change</button><br />
<span data-bind="text: json"></span>

JavaScript

(function($){
    var initData = {text: 'Some Text', 
                    arr: [{key: 1, value: 'a'}, 
                          {key: 2, value: 'b'}]};
    var newData = {text: 'Changed Text', 
                    arr: [{key: 1, value: 'aa'}, 
                          {key: 12, value: 'bb'},
                          {key: 13, value: 'cc'}]};
    var mapping = {'arr': { 
            key: function(item){
                return item.key;
            },
            create: function (options) {
                return ko.mapping.fromJS(options.data);
            }
        }
    };
    var viewModel = function (data) {
        var self = this;
        this.data = ko.mapping.fromJS(data, mapping);
        this.json = ko.computed(function() {
            return JSON.stringify(ko.mapping.toJS(self.data, mapping));
        });
        this.load = function() {
            ko.mapping.fromJS(initData, mapping, self.data);
        };                         
        this.change = function() {
            ko.mapping.fromJS(newData, mapping, self.data);
        };                         
    };
    ko.applyBindings(new viewModel(initData));
})(jQuery);