javascript - Vuejs change multiple select to simple select -

i'm new vuejs have script working multiple select , want using simple select countries , cities

my script : 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: []     }   } });    

i appreciate help

template

<div id="app">   selected country: {{selectedcountry}}   <br />   <select v-model="selectedcountry" >      <option v-for="country in countries" :value='country' :key="country.value">        {{ country.name }}      </option>   </select>   <select v-if="selectedcountry" v-model="selectedcountry.selectedcity">     <option v-for="city in selectedcountry.cities" :key="city.value" :value="city">{{city.name}}</option>   </select> </div> 

code

const countries = [   {      value: 3,      name: 'france',      cities: [       { value: 31, name: 'paris' },       { value: 32, name: 'marseille' }     ],      selectedcity: null },   {      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,       selectedcountry: null     }   } }); 

updated pen.