用定时器每秒更改变量值时怎么避免其它v-bind值的更新？

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

如下代码，手机访问。点击“获取验证码”后，在定时器执行期间点开下拉列表，select的option中 :value的值跟随codeText每秒刷新一次，导致option每秒也重新渲染，此时很难选上某个选项。点解？

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>lalalalala</title>
 <style>
 [v-cloak]{
    display: none;
}
	input,select{
	    margin: 50px 0;
		height: 100px;
		width: 100%;
		font-size: 50px;
	}
 </style>
</head>

<body>
<div id="app" v-cloak>
    <input type="button" v-model="codeText" @click="getTelCode">
   
    <select>
        <option v-for="p in list" :value="p.id">{{ p.province }}</option>
    </select>
</div>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.min.js"></script>
</body>
<script>

new Vue({
    el:'#app',
    data:{
        codeText:"获取验证码",
        list:[
            {
                id:1,
                province:'Beijing'
            },{
                id:2,
                province:'Shanghai'
            },{
                id:3,
                province:'Guangzhou'
            },{
                id:4,
                province:'Shenzhen'
            },{
                id:5,
                province:'Nanjing'
            },{
                id:6,
                province:'Suuuu'
            }
            
        ]
    },
    methods:{
        getTelCode:function(){
            var _this = this
            var count = 60
            var text = _this.codeText
            _this.codeText = count + "s后可重新获取"
            var i = setInterval(function () {
                if( count == 1 ){
                    _this.codeText = text
                    clearInterval(i)
                }else{
                    _this.codeText = --count + "s后可重新获取"
                }
            },1000)
        }
    }
    
})

</script>

</html>