KnockoutJS make observable object

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://rawgit.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<ul data-bind="foreach:items">
    <li>Item<span data-bind="text: $index()"></span>: 
        <span data-bind="text:value"></span>
    </li>
</ul>

JavaScript

function ViewModel() {
    var self = this;
    self.items = ko.mapping.fromJS([
        {value: 'a1'},
        {value: 'b2'},
        {value: 'c3'}    
    ])
}
function ViewModel2() {
    var self = this;
    self.items = ko.mapping.fromJS([
        {value: 'a1-1'},
        {value: 'b2-1'},
        {value: 'c3-1'}    
    ])
}

var vm = new ViewModel();
ko.applyBindings(vm);

var vm2 = new ViewModel2();
ko.applyBindings(vm2);


//add new item -> new item have to be converted to observable also ...
vm.items.push(ko.mapping.fromJS({value: 'd'}));

//change item's property directly
vm.items()[1].value('b is updated');

//change new item
vm.items()[vm.items().length - 1].value('d is updated');