Vue.js Vue-验证输入字段的未检查行为

我创建了一个简单的小型vue示例，用于测试输入字段的验证

但是更改字段内容的行为对我来说是意外的：

• 在第一次击键时，什么都没有发生，在第一次击键后，一切正常
• 当我尝试删除字段中的所有内容时，默认值会立即再次显示

当我从输入中删除验证时，一切正常

我为这种行为做了一个代码笔：

验证试验
导出默认值{
数据（）{
返回{
validInputPos:null，
};
},
方法：{
checkInputPos（newPos）{
this.validInputPos=this.mxValidateInt（newPos）
console.log（this.validInputPos）；
},
mxValidateInt（val）{
//空头支票
如果（值长度<1）{
返回错误
}
返回真值
},
}    
};
.无效{
背景色：红色；
颜色：黑色；
}

<template>
  <div id="app">
    <h1>Validation test</h1>
    
    <input
      type="text"
      :value="10"
      @input="checkInputPos($event.target.value)"
      :class="{invalid: validInputPos === false }"
    >

  </div>
</template>

<script>

  export default {
    data() {
      return {
        validInputPos: null,
      };
    },

    methods: {
      checkInputPos(newPos) {
        this.validInputPos = this.mxValidateInt(newPos)        
        console.log(this.validInputPos);            
      },
  
     mxValidateInt(val) {
        //check empty
        if(val.length < 1) {
          return false
        }
        return true
      },
  
     }    

  };
</script>

<style>
  .invalid {
    background-color: red;
    color: black;
  }
</style>