vue select 组件父子通信的问题，如下图和代码

Question

问题

select默认没有报错，一选择就报错了，值都能取到

代码

父组件

<template>
    <div>
        <comSelect :cityActived="cityActived" @childToFather="fatherFn($event)"></comSelect>
        {{cityActived}}
    </div>
</template>
<script>
import comSelect from '@/components/comSelect'
export default {
    components:{
        comSelect
    },
    data(){
        return{
            cityActived:1
        }
    },
    methods:{
        fatherFn(msg){
            this.cityActived = msg
        }
    }
}
</script>

子组件

<template>
    <div>
        <select v-model="cityActived" @change="childFn()">
            <option v-for="item in city" :key="item.id" :value="item.id">{{item.name}}</option>
        </select>
    </div>
</template>
<script>
export default {
    props:['cityActived'],
    data(){
        return{
            city:[
                {id:1,name:"北京"},
                {id:2,name:"上海"},
                {id:3,name:"广州"},
                {id:4,name:"深圳"},
            ]
        }
    },
    methods:{
        childFn(){
            this.$emit('childToFather',this.cityActived)
        }
    }
}
</script>