Kendo UI - Grid Binding Issue

When using the "Add" functionality *Initially* with the kendo grid, it works fine - the grid is updated whenever a new person is added to the view model. Once you click "Load People" though, the grid stops responding to updates to it's datasource. The simple template values listed below are there to show that the underlying viewModel is still being updated but for some reason, the datagrid has stopped Observing the people element.

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<div id="field-container">
    <!-- Form fields to add new Person to the people array of the view model -->
    <input data-bind="value:newPerson.name" id="name" class="k-textbox"/>
    <input data-bind="value:newPerson.age" class="k-textbox"/>
    <input data-bind="value:newPerson.phone" class="k-textbox"/>
    <input type="button" data-bind="click:addPerson" value="Add" class="k-button"/>                

    <div id="person-grid" style="width:475px;"></div>

    <!-- Button to simulate loading data from a server side data source -->
    <input type="button" data-bind="click:loadExistingPeople" value="Load People" class="k-button" />
    People Size: <span data-bind="text:people.length"></span>
    <!-- Simple Template area to display current state of underlying viewModel -->
    <!-- <ul id="people-list" data-template="people-template" data-bind="source: people">
      <script id="people-template" type="text/x-kendo-template">
         <li style="margin:5px;width:75px;">
            <span data-bind="text:name" />(<span data-bind="text:age" />)(<span data-bind="text:phone" />)
        </li>
     </script>
    </ul>  -->
</div>

JavaScript

var viewModel = kendo.observable({
    
    newPerson: {name:"", age:"",phone:""},
    people: [],
    
    addPerson: function(){
        this.get("people").push(this.newPerson);
        this.set("newPerson", {name:"", age:"",phone:""});
        $("#name").focus();
    },
    
    loadExistingPeople: function(){
        // Real world this would come from xhr call
        var externalPeople =[{name:"John", age:"33", phone:"555-666-6666"},
                             {name:"Victor",age:"56",phone:"666-999-0000"}]
        this.set("people", externalPeople);
        var grid = $("#person-grid").data("kendoGrid");
        grid.refresh();
    }
    
});

$("#person-grid").kendoGrid({
    columns:[
        {field:"name", title: "Name"},
        {field:"age", title: "Age"},
       {field:"age", title: "Phone"},
        {command:"destroy"}
    ],
    editable:{confirmation:true},
    update:"true",
    dataSource:{
        data:viewModel.people
    }
});

kendo.bind($("#field-container"), viewModel);
$("#name").focus();