title: Email validation in Vue.js
body: <p>I have been working with Vue for 24 hours now, so forgive the ignorance. I have searched around and I'm getting close, but I'm sure it's my lack of understanding and basic principles.</p>
  <p>I have a modal that opens when a button is clicked. This modal displays a form with an email input. I managed to get the modal working, but nothing happens when I type in an incorrect email.</p>
  <p>Here's my code for the component:</p>
  <pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;!-- Aside --&gt;
    &lt;aside class=&quot;aside&quot;&gt;
      &lt;button class=&quot;aside__btn button&quot; @click=&quot;showModal = true&quot;&gt;
        Send Me The Tips
      &lt;/button&gt;
    &lt;/aside&gt;
  
    &lt;!-- Modal --&gt;
    &lt;div class=&quot;modal&quot; v-if=&quot;showModal&quot;&gt;
      &lt;div class=&quot;modal-container&quot;&gt;
        &lt;a href=&quot;#&quot; class=&quot;close&quot; @click=&quot;showModal = false&quot;&gt;&lt;/a&gt;
  
        &lt;p class=&quot;modal__steps&quot;&gt;Step 1 of 2&lt;/p&gt;
        
        &lt;div class=&quot;relative&quot;&gt;
          &lt;hr class=&quot;modal__divider&quot; /&gt;
        &lt;/div&gt;
  
        &lt;div class=&quot;modal__heading-container&quot;&gt;
           &lt;p class=&quot;modal__heading&quot;&gt;Email Your Eail To Get &lt;span class=&quot;modal__heading-span&quot;&gt;Free&lt;/span&gt;
           &lt;/p&gt;
           &lt;p class=&quot;modal__heading&quot;&gt;iPhone Photography Email Tips:&lt;/p&gt;
        &lt;/div&gt;
  
        &lt;form&gt; 
          &lt;input for=&quot;email&quot; type=&quot;email&quot; placeholder=&quot;Please enter your email here&quot; required v-model=&quot;email&quot;&gt;
          &lt;span class=&quot;floating-placeholder&quot; v-if=&quot;msg.email&quot;&gt;{{msg.email}}&lt;/span&gt;
          &lt;!-- &lt;span class=&quot;floating-placeholder&quot;&gt;Please enter your email here&lt;/span&gt; --&gt;
          &lt;button class=&quot;modal__button button&quot;&gt;Send Me The Tips&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default ({
      data () {
        return {
          showModal: false,
          email: '',
          msg: [],
        }
      }, 
      watch: {
        email(value) {
          // binding this to the data value in the email input
          this.email = value;
          this.validateEmail(value);
        }
      },
      methods: {
        validateEmail(value){
          if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(value))
      {
        this.msg['email'] = '';
      } else{
        this.msg['email'] = 'Please enter a valid email address';
      } 
        }
      }
    })
  &lt;/script&gt;
  </code></pre>
  <p>I'm using Laravel if that's of importance.</p>