vue select二級聯動第二級預設選中第一個option值

當二級聯動比如選擇國家的時候，希望選中一個國家的時候後面城市預設選中第一個城市，則給國家的select加一個@change事件就可以了

 <div class="inputLine">
          <span>所在區域</span>
          <select name="" v-model="countryName" @change="selectCountry">
            <option :value="item" v-for="(item,index) in area">
              {{item.country}}
              <svg class="icon icon-arrow-bottom" aria-hidden="true">
                <use xlink:href="#icon-arrow-bottom"></use>
              </svg>
            </option>
          </select>
          <select name="" v-model="cityName">
            <option :value="item" v-for="(item,index) in countryName.city">
              {{item}}
              <svg class="icon icon-arrow-bottom" aria-hidden="true">
                <use xlink:href="#icon-arrow-bottom"></use>
              </svg>
            </option>
          </select>
        </div>

data
        countryName:{},
        cityName:"請選擇城市",
        area:[
          {
            "country":"美國",
            "city":[
              "紐約",
              "洛杉磯",
              "舊金山",
              "西雅圖",
              "波士頓",
              "休斯頓",
              "聖地亞哥",
              "芝加哥",
              "其它",
            ]
          },
          {
            "country":"加拿大",
            "city":[
              "溫哥華",
              "多倫多",
              "蒙特利爾",
              "其它"
            ]
          },
          {
            "country":"澳大利亞",
            "city":[
              "悉尼",
              "墨爾本",
              "其它"
            ]
          },
          {
            "country":"新加坡",
            "city":[
              "新加坡"
            ]
          },
          /*{
           "country":"中國",
           "city":[
           "北京市",
           ]
           },*/
        ],

methods:

selectCountry(value){
        this.cityName=this.countryName.city[0];
      },