Splice error in KO

splice array of new objects onto existing KO observable array, causes KO binding error.

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<input type="button" id="btnAddToArray" value="Add Contacts"/>
<div id="messages">
    Contact array length: <span data-bind="text: Contacts().length"></span>
</div>
<table style="width: 500px;" data-bind="foreach: Contacts">
    <tr>
        <td data-bind="text: ContactName"></td>
        <td style="width: 250px;" data-bind="text: SpecialNote"></td>
    </tr>
</table>

JavaScript

var contactJSON1 = '[{"ContactId":1,"ContactName":"Adam Smith","SpecialNote":"special note #1"},{"ContactId":2,"ContactName":"Joe Smith","SpecialNote":"special note #2"},{"ContactId":3,"ContactName":"Sally Smith","SpecialNote":"another special note"},{"ContactId":4,"ContactName":"Mr. Smith","SpecialNote":"notes for Mr. Smith"}]';
var contactData1 = ko.utils.parseJson(contactJSON1);

var vmContacts;

function ContactsViewModel() {
   var self = this;
   self.Contacts = ko.observableArray([]);
}

$("#btnAddToArray").click(function() {
    var contactJSON2 = '[{"ContactId":29,"ContactName":"Bob Johnson","SpecialNote":"special notes here"},{"ContactId":65,"ContactName":"Jim Johnson","SpecialNote":"special notes for Jim"}]';
    var contactData2 = ko.utils.parseJson(contactJSON1);
    console.log(contactData2);
    vmContacts.Contacts.push.apply(vmContacts.Contacts,contactData2);
});

vmContacts = new ContactsViewModel();
ko.applyBindings(vmContacts);

vmContacts.Contacts(contactData1);