app.js

const LoginComponent = Vue.component('login-component', {
    template: '<div class="signin-wrapper text-center"> \
    <form class="form-signin"> \
      <h1 class="h3 mb-3 font-weight-normal">Please sign in</h1> \
      <label for="inputEmail" class="sr-only">Email address</label> \
      <input v-model="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus=""> \
      <label for="inputPassword" class="sr-only">Password</label> \
      <input  v-model="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required=""> \
      <button v-on:click="login" class="btn btn-lg btn-primary btn-block" type="button">Sign in</button> \
      <p class="mt-5 mb-3 text-muted">© 2017-2018</p> \
    </form> \
  </div>',
  data : function () {
    return {
      email : "",
      password  : ""
    }
  },
  methods : {
    login () {
      if (this.email.length === 0) {
        alert("Please enter an email");
        return;
      }
      if (this.password.length === 0) {
        alert("Please enter a password");
        return;
      }

      Parse.User.logIn(this.email, this.password)
      .then(() => {
        // Used an arrow function here because I 
        // want to access 'this' which is overridden in
        // a conventional function
        this.$router.replace("/");
      })
      .catch(function(e) {
        alert ("Error logging in! " + e.message);

      });
    }
  }
})