vue select Second-level linkage Second-level instance of the first option value is selected by default

When the second-level linkage is used for selecting a country, if you want to select a country, the next city will select the first city by default. Then add a @change event to the country's select

&lt;div class="inputLine"&gt;
  &lt;span&gt;Area&lt;/span&gt;
  &lt;select name="" v-model="countryName" @change="selectCountry"&gt;
  &lt;option :value="item" v-for="(item,index) in area"&gt;
  {{}}
  &lt;svg class="icon icon-arrow-bottom" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-arrow-bottom" rel="external nofollow" rel="external nofollow" &gt;&lt;/use&gt;
  &lt;/svg&gt;
  &lt;/option&gt;
  &lt;/select&gt;
  &lt;select name="" v-model="cityName"&gt;
  &lt;option :value="item" v-for="(item,index) in "&gt;
  {{item}}
  &lt;svg class="icon icon-arrow-bottom" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-arrow-bottom" rel="external nofollow" rel="external nofollow" &gt;&lt;/use&gt;
  &lt;/svg&gt;
  &lt;/option&gt;
  &lt;/select&gt;
 &lt;/div&gt;

data
  countryName:{},
  cityName:"Please select a city",
  area:[
   {
   "country":"USA",
   "city":[
    "New York",
    "Los Angeles",
    "San Francisco",
    "Seattle",
    "Boston",
    "Houston",
    "San Diego",
    "Chicago",
    "other",
   ]
   },
   {
   "country":"Canada",
   "city":[
    "Vancouver",
    "Toronto",
    "Montreal",
    "other"
   ]
   },
   {
   "country":"Australia",
   "city":[
    "Sydney",
    "Melbourne",
    "other"
   ]
   },
   {
   "country":"Singapore",
   "city":[
    "Singapore"
   ]
   },
   /*{
    "country":"China",
    "city":[
    "Beijing",
    ]
    },*/
  ],

methods:

selectCountry(value){
  =[0];
  },

The above example of the second level linkage of vue select vue select the first option value by default is all the content I share with you. I hope you can give you a reference and I hope you support me more.