Combobox change not firing

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/smoothness/jquery-ui.css">
<script src="http://mjf.me/Random/jquery-ui-combobox.js"></script>
<select data-bind="value: typeField, valueUpdate: 'change'" id="combobox" >
    <option value="">Select one...</option>
    <option value="ActionScript">ActionScript</option>
    <option value="AppleScript">AppleScript</option>
    <option value="Asp">Asp</option>
    <option value="BASIC">BASIC</option>
    <option value="C">C</option>                        
</select>

<button id="showVal">current option value</button>
<br/><br/>
This shows the current value, but only after the button is clicked :(
<div><b>Option Value:</b> <span id="oval"></span></div>
<br/>
This should automatically update when the option changes...but the option doesn't actually fire a change event :(
<div><b>KO Value:</b> <span data-bind="value: optionValue, valueUpdate: 'vhange'" id="koval"></span></div>

CSS

.ui-button { margin-left: -1px; }
.ui-button-icon-only .ui-button-text { padding: 0.35em; } 
.ui-autocomplete-input { margin: 0; padding: 0.48em 0 0.47em 0.45em; width: 140px; }
ul.ui-widget {font-size: 0.7em;}
input.ui-widget {font-size: 0.7em;}
button.ui-widget {font-size: 0.7em;}
.ui-menu { max-height: 200px; overflow-y: auto;}
body {color: #666;}

JavaScript

$('#combobox').combobox();
$('body').on("change", "#combobox", function (target) {
    $('#oval').html($('#combobox').val())
});

$('#showVal').click(function() {
    $('#oval').html($('#combobox').val())
});

var viewModel = {
    optionValue: ko.observable(),
    computedVar: ko.computed(function() {
        return this.optionValue();
    })
};
                    
ko.applyBindings(viewModel);