Vue使用vux-ui自定義表單驗證遇到的問題及解決方法

<x-input type="number" v-model="code" placeholder="請輸入驗證碼" :is-type="codeValue" />
export default {
 data() {
 return{
 code: '',
 codeValue: function(value){
 return {
 valid: value.length === 4,
 msg: "驗證碼有誤!"
 }
 }
 }
 }
}

<x-input type="number" v-model="code" placeholder="請輸入驗證碼" :is-type="codeValue" ref="refcode" @on-change="keyDown" />
<x-button action-type="submit" :disabled="disabled">完成</x-button>
 export default {
 data() {
 return{
 code: '',
 disabled: true,
 codeValue: function(value){
 return {
 valid: value.length === 4,
 msg: "驗證碼有誤!"
 }
 }
 }
 },
 methods: {
 keyDown(){
 if(this.$refs.refcode.valid == true && this.code != ''){
 this.disabled = false;
 }else{
 this.disabled = true;
 }
 }
 }
 }