vue中select下拉列表默认选中的几种方法

最近开始学习vue,在学习的过程中遇到的问题将记录在这里。
今天遇到的第一个问题就是,select下拉列表设置默认选中的问题。
官方文档传送门

第1中方法,已知下拉列表的内容
<div id="app">
    <select v-model="selectedOption">
        <option v-for="option in options" :value="option">{{option.city}}</option>
    </select>
<script type="text/javascript">
new Vue({
    el:"#app",
    data:{
        selectedOption:{cityCode:0,city:"北京"},
        options:[
                cityCode:0,
                city:"北京"
                cityCode:1,
                city:"上海"
                cityCode:2,
                city:"天津"
                cityCode:3,
                city:"重庆"
第2中方法,数据是由后台返回回来,不能确定默认项的具体数值
<div id="app">
    <select v-model="selectedOption">
        <option v-for="option in options" :value="option">{{option.city}}</option>
    </select>
<script type="text/javascript">
new Vue({
    el:"#app",
    data:{
        selectedOption:{},
        options:[]
    created(){
        this.$http.get('/api/cities').then((res)=>{
            this.options = res.data;
            this.selectedOption = this.options[0];