JavaScript — Vuejs изменить множественный выбор на простой выбор

Я новичок в vuejs, у меня есть этот скрипт, работающий с множественным выбором, и я хочу использовать только простой выбор для стран и городов

Мой сценарий: http://codepen.io/Kradek/pen/KWLxVa?editors=1010

<div id="app">
Selected Countries: {{selectedCountries}}
<br />
<select v-model="selectedCountries" multiple >
<option v-for="country in countries" :value='country' :key="country.value">
{{ country.name }}
</option>
</select>
<select v-for="country in selectedCountries" v-model="country.selectedCity" :key="country.value">
<option v-for="city in country.cities" :key="city.value" :value="city">{{city.name}}</option>
</select>
</div>

console.clear()
const countries = [
{
value: 3,
name: 'FRANCE',
cities: [
{ value: 31, name: 'Paris' },
{ value: 32, name: 'Marseille' }
],
selectedCity:{ value: 31, name: 'Paris' } },
{
value: 5,
name: 'USA',
cities: [
{ value: 51, name: 'New-York' },
{ value: 52, name: 'Boston' }
],
selectedCity: null},
{
value: 6,
name: 'CANADA',
cities: [
{ value: 61, name: 'Montreal' },
{ value: 62, name: 'Vancouver' },
{ value: 63, name: 'Ottawa' },
{ value: 64, name: 'Toronto' }
],
selectedCity: null
},
{
value: 8,
name: 'MOROCCO',
cities:[
{ value: 81, name: 'Rabat' },
{ value: 82, name: 'Casablanca' },
{ value: 83, name: 'Fes' }
],
selectedCity: null
}
]

new Vue({
el: "#app",
data: function() {
return {
countries,
selectedCountries: []
}
}
});

Я ценю любую помощь