如何正确验证 Vue 表单？

我需要进行表单验证。

1. 创建任务时，至少 10 个字符。红色边框。

2. 正确时为绿色

3. 并且在输入正确的值之前，该按钮不会处于活动状态。

jsfiddle代码在这里

            Vue.component('task-element',{
        props: [ 'task' ],
        data : function () {
           var d = {seconds_elapsed: null}; 
           return d;
        },
        methods: {
           timer() {
              this.seconds_elapsed = (Date.now() - this.task.startTime) / 1000 | 0;
              setTimeout(this.timer, 1000);
           }
        },
        created() {
           if (!this.task.startTime)
              this.$set(this.task, 'startTime', Date.now());
           this.timer();
        },
        template : `
        <li>
        <label :class="{ islong: task.text.length >= 15 }">
           <input type="checkbox" v-model="done">
           <span>{{ task.text }}</span>
           <small>{{ seconds_elapsed }} seconds ago</small>
        </label>
        <button v-if="task.done" @click="$emit('delete')">delete</button>
        </li>`,
        computed: {
           done: {
              get() {
              return this.task.done;
              },
              set(done) {
              this.$emit('update', { done });
              },
           },
        },
        });

        new Vue({
        el: '#app',
        data: {
           newTodo: '',
           todos: [
              { id: 1, text: 'Task 1', done: false },
              { id: 2, text: 'Task 2', done: false },
              { id: 3, text: 'Task 3', done: true },
           ],
           data_is_loaded: true,
        },
        methods: {
           addTodo() {
           if(this.newTodo.length > 10) {
              const text = this.newTodo;
              if (text.length) {
              this.todos.push({
                 id: 1 + Math.max(0, ...this.todos.map(n => n.id)),
                 text,
                 done: false,
              });
              this.newTodo = '';
              } else {
              alert('empty');
              }
           }},
        },
        });