Kendo MVVM - template not updating

Question

In the code snippet, I want to update a Kendo Template by changing an item of an array.

The problem is: it updates data-bind="text: foo", but it doesn't update #:foo#.

Why?

var viewModel = kendo.observable({
    myArray: [
      {foo: 'foo not updated'}
    ],
    update() {
      this.set('myArray[0].foo', 'foo updated!')
    }
});
kendo.bind($(document.body), viewModel);

<div data-bind="source: myArray" data-template="tmp"></div>

<script id="tmp" type="text/x-kendo-template">
  <div data-bind="text: foo"></div>
  <div>#:foo#</div>
</script>

<button type="button" data-bind="click: update">Update</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>

Answer 1

Using trigger('change') makes kendo update.