materio-d8/web/themes/custom/materiotheme/vuejs/components/Helper/LoginForm.vue

<template>
  <div id="login-form">
    <h2>Login</h2>
    <input
      type="email"
      name="email"
      v-model="email"
      placeholder="Email"
    >
    <input
      type="password"
      name="password"
      v-model="password"
      placeholder="Password"
    >
    <button
      type="button"
      name="login"
      @click.stop="onLogin"
    >
      login
    </button>
  </div>
</template>

<script>

import { mapState, mapActions } from 'vuex'

export default {
  name: "LoginForm",
  data: () => ({
    email:null,
    password:null
  }),
  methods: {
    ...mapActions({
      userLogin: 'User/userLogin'
    }),
    onLogin () {
      this.userLogin({
        mail: this.email,
        pass: this.password
      }).then( () => {
          console.log('logedin from login component');
          this.$emit('onLogedIn')
        }
      ).catch(( error ) => {
        console.warn('Issue with login from login component', error)
        Promise.reject(error)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>