JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://coderenaissance.github.io/knockout.viewmodel/knockout.viewmodel.js"></script>
Comida:<input data-bind="value: like" /><br/>
Musica:<select data-bind="options: music, optionsText: 'name', optionsValue: 'id', value: selected"></select><br/>
<h1 data-bind="text: all"></h1>

JavaScript

var options = {
    extend: {
        "{root}": function (m) {
            m.all = ko.computed(function () {
                var item = ko.utils.arrayFirst(m.music(), function (g) {
                    return g.id() == m.selected();
                });
                if (item == null) return '';
                return m.like() + ' ' + item.name();
            });
        }
    }
};
var m1 = '{"like":"Pastel","music":[{"id":1,"name":"J-Pop"},{"id":2,"name":"J-Rock"},{"id":3,"name":"Rock"}],"selected":"3"}';
var m2 = '{"like":"GatĂŞau","music":[{"id":1,"name":"J-Pop"},{"id":2,"name":"J-Rock"},{"id":3,"name":"Rock"}],"selected":"2"}';
var viewmodel = ko.viewmodel.fromModel(JSON.parse(m1), options);
ko.applyBindings(viewmodel);
setTimeout(function () {
    console.clear();
    ko.viewmodel.updateFromModel(viewmodel, JSON.parse(m2));
}, 3300)