JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ocp.cscglobal.com/cdn/global/3plib/kendoui/2014.2.716/js/kendo.all.min.js"></script>
<div>
    Should initially produce "2" and "20", then change to "4" and "40" after a 2-second delay (when the "0" changes to a "1".)
</div>
<div id="container">
    <div>
        <span>Selected: </span>
        <span id="selectedValue" data-bind="text: selectedSubItem">{selected}</span>
    </div>
    <div id="items" data-bind="source: items" data-template="my-template">{items}</div>
</div>

<script id="my-template" type="text/x-kendo-template">
			<div class="dataItem">
				<span data-bind="text: itemCalc">{calc}</span>
			</div>
</script>

JavaScript

var viewModel = kendo.observable({
    selectedSubItem: 0,
    itemCalc: function(item) {
                var selectedIdx = this.get('selectedSubItem');
                var selectedSubItemObject = item.get('subItems')[selectedIdx];
                return 2 * selectedSubItemObject.get('value');
            },
    items: [
        {
            subItems: [
                {
                    value: 1
                },
                {
                    value: 2
                }
            ]
        },
        {
             subItems: [
                {
                    value: 10
                },
                {
                    value: 20
                }
            ]
        }
    ]
});
kendo.bind($('#container'), viewModel);

setTimeout(function() {
    viewModel.set('selectedSubItem', 1);
}, 2000);