form validate css

src/components/my-form.vue

@@ -8,9 +8,10 @@
                 :placeholder="item.placeholder"
                 :type="item.type"
                 v-model="formData[key]"
-                @validate="validateData(key)">
+                @validate="validateData(key)"
+                :invalid="formErrors[key]"
+            >
             </my-input>
-            <span class="error" v-if="formErrors[key]">required</span>
         </div>
         <div>
             <button v-for="(b, i) in buttons" :key="i" @click.prevent="buttonClick(b.type)">{{ b.label }}</button>
@@ -85,10 +86,4 @@ export default {
         }
     }
 }
-</script>
-
-<style scoped>
-    .error {
-        color: red;
-    }
-</style>
+</script>