Vuex state inserts [object Object] into input when binded - vuejs2

Question

The issue is that when I bind :value to an input to Vuex and say #input for a method, Vuex causes the input to automatically become an object. When I state it should be the data of the input object via += that doesn't account for deletes and gets messy.
I'm using a module in my Vuex. Below, first, is my template for registration.
<template>
<div class="register-container container">
<div class="auth-form">
<div class="form container">
<div class="title">Sign up to Site</div>
<div class="form">
<div class="input el-input">
<input type="text" placeholder="Email" :value="registrationEmail" #input="setRegistrationEmail" class="el-input__inner">
</div>
<div class="input el-input">
<input type="text" placeholder="Username" :value="registrationUsername" #input="setRegistrationUsername" class="el-input__inner">
</div>
<div class="input el-input">
<input type="password" placeholder="Password" :value="registrationPassword" #input="setRegistrationPassword" class="el-input__inner">
</div>
<div class="input el-input">
<input type="password" placeholder="Confirm Password" v-model="confirm_password" class="el-input__inner">
</div>
<div class="submit btn-pill"><span class="content" #click="register">Sign Up</span></div>
</div>
Have an account? <span class="blue">Log in!</span>
</div>
</div>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex';
export default {
data() {
return {
confirm_password: '',
};
},
methods: {
...mapMutations('authentication', [
'setRegistrationEmail',
'setRegistrationPassword',
'setRegistrationUsername',
]),
...mapActions('authentication', [
'register',
]),
},
computed: {
...mapState('authentication', [
'registrationEmail',
'registrationPassword',
'registrationUsername',
]),
},
};
</script>
Here is the mdoule:
import HTTP from '../http';
export default {
namespaced: true,
state: {
registrationEmail: null,
registrationPassword: null,
registrationUsername: null,
},
actions: {
register({ state }) {
return HTTP().post('/api/auth/register', {
email: state.registrationEmail,
username: state.registrationUsername,
password: state.registrationPassword,
});
},
},
mutations: {
setRegistrationEmail(state, email) {
console.log(email);
state.registrationEmail = email;
},
setRegistrationPassword(state, password) {
state.registrationPassword = password;
},
setRegistrationUsername(state, username) {
state.registrationUsername = username;
},
},
};

Answer 1

You need to do something like this, link
Call the setRegistrationEmail from a method instead of directly calling it.
<input type="text" :value="registrationEmail" #change="setEmail" class="el-input__inner">
and inside methods
methods: {
setEmail(e) {
this.setRegistrationEmail(e.target.value)
},
...mapMutations('authentication', [
'setRegistrationEmail',
'setRegistrationPassword',
'setRegistrationUsername',
]),
...mapActions('authentication', [
'register',
]),
},