vue @click的时候，第一次点击无效，第二次才有效果

<select type="button"  v-model="typhoonYear" @click="getselectYearByDistinct" @change="getTyphoonListByYear">
    <option value="">--请选择--</option>
    <option v-for='item in typhoonYearList' :key="item.id">{{ item }}</option>
</select>

<script>

export default {
    name: "typhoon",
    data: function () {
        return {  
            typhoonYear: '', //台风年份o
            typhoonYearList: [],//数据库中台风发生的年份        
        }
    },

/*根据年份获取当年的所有台风年份*/
getselectYearByDistinct:function() {
    //表格
    // var _this = this;
    var option=this.typhoonYearList;
    this.$axios.get(request.selectYearByDistinct)
        .then(function (response) {
            var data=response.data;
            var item =1;
            for (item  in data) {
                if(!option.includes( data[item])) {
                    option.push( data[item]);
                }else {
                    return data[item];
                }
            } 
        })
        .catch(function (error) {
            window.console.log(error);
        });
},

问题：结果第一次点击无效，第二次才出现效果。

解决办法：

mounted() {
    this.getselectYearByDistinct();//在mounted()中添加这个方法，就解决了
},

</script>