vue.js: how to access component data from action?

I'm using webpack, vue, vuex, vue-loader, etc. I'm not sure if I have this all set up correctly.

// login component .vue
<template>
  <form>
    <input type="email" name="email" placeholder="Email" v-model="logininfo.email">
    <input type="password" name="password" v-model="logininfo.password">
    <button @click.prevent="login(logininfo.email, logininfo.password)">Login</button>
  </form>
</template>

<script>
  import { login } from '../../vuex/actions'

  export default {
    data: function () {
      return {
        logininfo: {
          email: null,
          password: null
        }
      }
    },
    vuex: {
      actions: {
        login
      }
    }
  }
</script>

and then my action:

// vuex/actions.js
import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

export const login = ({dispatch}, email, password) => {
  dispatch('LOGIN_REQUEST')
  Vue.http.post('/login', {email, password}).then((response) => {
    dispatch('LOGIN_SUCCESS')
  }, (response) => {
    dispatch('LOGIN_FAILURE')
  })
}

The problem I'm having is that since this form is being 'submitted' with AJAX, the form inputs stay filled in when the response comes back invalid. So I need a way to, from within the action, set logininfo.password = '' to clear that form field. But I'm not sure how to access that component's data again. Maybe I'm misunderstanding something and this data (logininfo) should really be in the vuex store? I felt like this data should not be in the main state store because I'm really just using it to pass the credentials to the backend, which is why I localized the data to the component.

Any tips/suggestions?