Vue component with directive

src/App.vue

@@ -3,6 +3,7 @@
     <v-content  class="d-flex flex-column align-center">
       <person-grid :people="people"></person-grid>
      <!--  <v-btn @click="getData">Get Data!!</v-btn> -->
+     <jose v-highlight></jose>
       <austin-wright></austin-wright>
       <julie-halversen></julie-halversen>
       <thor-anderson></thor-anderson>
@@ -11,20 +12,22 @@
 </template>
 
 <script>
+import Jose from './developers/Jose'
 import PersonGrid from './components/PersonGrid'
 import AustinWright from './developers/AustinWright.vue'
-import JulieHalversen from './developers/JulieHalversen.vue';
-
+import JulieHalversen from './developers/JulieHalversen.vue'
 import ThorAnderson from './developers/ThorAnderson.vue'
 //import { people } from './assets/people'
 import axios from 'axios'
+
 export default {
   name: 'App',
   components: {
     PersonGrid,
     AustinWright,
-    JulieHalversen
-    ThorAnderson
+    JulieHalversen,
+    ThorAnderson,
+    Jose,
   },
   data: () => {
     return {

src/developers/Jose.vue

@@ -0,0 +1,93 @@
+<template>
+  <v-app>
+    <v-row align="center">
+    <v-form
+      ref="form"
+    >
+      <h1>Jose Cisneros</h1>
+      <v-text-field
+        v-model="name"
+        :counter="10"
+        :rules="nameRules"
+        label="Name"
+        required
+      ></v-text-field>
+
+      <v-text-field
+        v-model="email"
+        :rules="emailRules"
+        label="E-mail"
+        required
+      ></v-text-field>
+
+      <v-btn
+        :disabled="!valid"
+        color="success"
+        class="mr-4"
+        @click="validate"
+      >
+        Validate
+      </v-btn>
+
+      <v-btn
+        color="error"
+        class="mr-4"
+        @click="reset"
+      >
+        Reset Form
+      </v-btn>
+
+      <v-btn
+        color="warning"
+        @click="resetValidation"
+      >
+        Reset Validation
+      </v-btn>
+    </v-form>
+  </v-row>
+  </v-app>
+</template>
+
+<script>
+  export default {
+    data: () => ({
+      valid: true,
+      name: '',
+      nameRules: [
+        v => !!v || 'Name is required',
+        v => (v && v.length <= 10) || 'Name must be less than 10 characters',
+      ],
+      email: '',
+      emailRules: [
+        v => !!v || 'E-mail is required',
+        v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
+      ],
+      select: null,
+      items: [
+        'Item 1',
+        'Item 2',
+        'Item 3',
+        'Item 4',
+      ],
+      checkbox: false,
+      lazy: false,
+    }),
+
+    methods: {
+      validate () {
+        if (this.$refs.form.validate()) {
+          this.snackbar = true
+        }
+      },
+      reset () {
+        this.$refs.form.reset()
+      },
+      resetValidation () {
+        this.$refs.form.resetValidation()
+      },
+    },
+  }
+</script>
+
+<style>
+</style>

src/main.js

@@ -4,6 +4,22 @@ import vuetify from './plugins/vuetify';
 
 Vue.config.productionTip = false
 
+Vue.directive('highlight', {
+  bind(el, binding) {
+    var colors = ['blue', 'yellow', 'green', 'red']
+    var currentColor = 0
+
+    function changeColor() {
+      --currentColor
+      if(currentColor < 0) {
+        currentColor = colors.length - 1
+      }
+      el.style.color = colors[(currentColor + 1) % colors.length]
+    }
+    setInterval(changeColor, 1000)
+  }
+})
+
 new Vue({
   vuetify,
   render: h => h(App)