JSFiddle - React, Tailwind, and code Playground

HTML

<select data-bind="options: list,
                   optionsCaption: 'Select...',
                   optionsText: 'location',
                   optionsValue: 'code',
                   value: selectedRegion"></select>
<!-- ko with : selectedRegion -->
<select data-bind="options: $root.countryList,
                   optionsCaption: 'Select...',
                   optionsText: 'location',
                   optionsValue: 'code',
                   value: $parent.selectedCountry"></select>
<!-- /ko -->

JavaScript

var packageData = [{
    code: "EU",
    location: 'Euprope',
    countries: [{
        location: "England",
        code: 'EN'
    }, {
        location: "France",
        code: 'FR'
    }]
}, {
    code: "AS",
    location: 'Asia',
    countries: [{
        location: "Korea",
        code: 'KO'
    }, {
        location: "Japan",
        code: 'JP'
    }, ]
}];

function viewModel(list, addons) {
    var self = this;
    self.list = list;
    self.selectedRegion = ko.observable();
    self.selectedCountry = ko.observable();
    self.countryList = ko.computed(function () {
        var region = self.selectedRegion();
        var filtered = ko.utils.arrayFirst(self.list, function (item) {
            return item.code == region;
        });
        if (!filtered) {
            return []
        } else {
            return filtered.countries;
        }
    });
}

ko.applyBindings(new viewModel(packageData));