KnockoutJS - Multi select using select 2 showing only 1st select

Question

I'm trying to use the select 2 Multi-select boxes with Knockout JS.
The box displays a list of countries and the user can select multiple countries.
The box is displaying multiple countries correctly as expected, however the observable array is only showing the first entry.
My intention is to get all the selected countries and not the first one.
At first i thought i cant use a select 2 multi select with knockout, however if if i add two for example (MT,NL) the observable shows MT, however if i remove MT it updates to NL (so i dont think thats the issue)

Logic below:

// Class to represent a row in the dpos grid
function DpoItem(address, preferredLanguage, countries)
{
    var self = this;
    self.address = address;
    self.preferredLanguage = preferredLanguage;
    self.countries = ko.observableArray(countries);
}

// Class to represent a language
function LanguageItem(code, name)
{
    var self = this;
    self.code = code;
    self.name = name;
}

// Class to represent a country
function CountryItem(code, name)
{
    var self = this;
    self.code = code;
    self.name = name;
}


// Overall viewmodel for this screen, along with initial state
function DposViewModel()
{
    var self = this;

    // Populate countries
    var countriesObject = JSON.parse(countriesJSON);
    var countries = [];
    for (var cKey in countriesObject)
    {
        countries.push(new CountryItem(cKey, countriesObject[cKey]));
    }
    self.countriesList = ko.observableArray(countries);

    // Populate languages
    var languagesObject = JSON.parse(languagesJSON);
    var languages = [];
    for (var lKey in languagesObject)
    {
        languages.push(new LanguageItem(lKey, languagesObject[lKey]));
    }
    self.languagesList = ko.observableArray(languages);

    // parse JSON DTOs and put them in the viewmodel
    var dposObject = JSON.parse('[{"countries":[],"type":"dpo","address":"dpo @avis.com","preferredLanguage":"en - GB"},{"countries":["GB", "MT"],"type":"dpo","address":"dpo @avis.co.uk","preferredLanguage":"en - GB"},{"countries":["MT"],"type":"dpo","address":"dpo @avis.com.mt","preferredLanguage":"mt - MT"}]');
    var dpos = [];
    dposObject.forEach(dpo =>
    {
        dpos.push(new DpoItem(dpo.address, dpo.preferredLanguage, dpo.countries));
    });
    self.dpos = ko.observableArray(dpos);

    self.addDpo = function ()
    {
        self.dpos.push(new DpoItem("", "", ""));
    };

    self.removeDpo = function ()
    {
        self.dpos.remove(this);
    };

    self.checkDpos = function ()
    {
        for (i = 0; i < self.dpos().length; i++)
        {
            var dpo = self.dpos()[i];
            var dpoCountries = dpo.countries();
        }
    };
}

ko.applyBindings(new DposViewModel());


$(document).ready(function ()
{
    $('.js-example-basic-multiple').select2();
});

UI below:

<div id="table" class="table-editable">
    <table class="table">
        <thead>
            <tr>
                <th>Email</th>
                <th>Preferred Language</th>
                <th>Countries</th>
                <th><span id="table-add" class="table-add glyphicon glyphicon-plus" data-bind="click: addDpo"></span></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: dpos">
            <tr>
                <td contenteditable="true" data-bind="text: $data.address"></td>
                <td>
                    <select class="js-example-basic-single" data-bind="options: $parent.languagesList,  optionsText: 'name', optionsValue: 'code', value: $data.preferredLanguage"></select>
                </td>
                <td>
                    <select class="js-example-basic-multiple" multiple="multiple" data-bind="options: $parent.countriesList,  optionsText: 'name', optionsValue: 'code', value: $data.countries"></select>
                </td>
                <td>
                    <span class="table-remove glyphicon glyphicon-remove" data-bind="click: $parent.removeDpo"></span>
                </td>
            </tr>
        </tbody>
    </table>
</div>

<button data-bind="click: checkDpos">Click me</button>


<div>
    <h1>Summary</h1>
    <div data-bind="foreach: dpos">
        <p>Address: <strong data-bind="text: address"></strong></p>
        <p>Preferred Language: <strong data-bind="text: preferredLanguage"></strong></p>
        <p>Countries: <strong data-bind="text: countries"></strong></p>
    </div>
</div>

Any ideas why this is happening?