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

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

第1中方法，已知下拉列表的内容

<div id="app">
    <select v-model="selectedOption">
        <option v-for="option in options" :value="option">{{option.city}}</option>
    </select>
</div>
<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>
</div>
<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];
        })
    }
})

我一般选择使用第2中方法，这样如果后台数据有修改，我这里的代码也不需要修改。而且此处的selectedOption是一个对象，是为了方便在后续中可能会需要使用其他数据。