Почему поля хранилища пусты при записи в объект?

<template>
    <div class="container">
        <form v-if="this.$store.state.isAdding===true">
            <div class="inputWrapper">
                <label for="nameInput">Name :</label>
                <input type="text" id="nameInput" v-model="name">
            </div>
            <div class="inputWrapper">
                <label for="surnameInput">Surname :</label>
                <input type="text" id="surnameInput" v-model="surname">
            </div>
            <div class="inputWrapper">
                <label for="emailInput">E-mail :</label>
                <input type="text" id="emailInput" v-model="email">
            </div>
            <div class="inputWrapper">
                <label for="phoneInput">Phone :</label>
                <input type="text" id="phoneInput" v-model="phone">
            </div>
            <div class="inputWrapper">
                <input type="submit" @click="wasAdded">
            </div>

        </form>
    </div>
</template>




<script>
export default {
    computed :{
        name:{
            get(){
                return this.$store.state.user.name;
            },
            set(value){
                
                this.$store.commit('updateName', value);
            }
        },
        surname:{
            get(){
                return this.$store.state.user.surname;
            },
            set(value){
                
                this.$store.commit('updateSurname', value);
            }
        },
        email:{
            get(){
                return this.$store.state.user.email;
            },
            set(value){
                
                this.$store.commit('updateEmail', value);
            }
        },
        phone:{
            get(){
                return this.$store.state.user.phone;
            },
            set(value){
                
                this.$store.commit('updatePhone', value);
            }
        }

    },
    methods:{
        wasAdded(){
            console.log('--------adding handler activated-------');

            const userObj={
                name:    this.$store.state.user.name,
                surname: this.$store.state.user.surname,
                email:   this.$store.state.user.email,
                phone:   this.$store.state.user.phone
            }
             console.log('constant user has been formed: ',userObj);

                this.$store.state.user.LS.push(userObj);
                console.log('pushed user obj to store as : ',this.$store.state.user.LS);

                localStorage.setItem(userObj.phone,JSON.stringify(userObj));
                console.log('pushed user obj to localStorage');


            if (confirm('All is correct?')){
                this.$store.state.isAdding=false;
                this.$router.push('/')
            }
        }
    }
}
</script>

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user:{
      name:'',
      surname:'',
      email:'',
      phone:'',
      LS:[],
    },
    isAdding:false
  },
  mutations: {
    
    updateName(state, name){
      state.name=name;
    },
    updateSurname(state, surname){
      state.surname=surname;
    },
    updateEmail(state, email){
      state.email=email;
    },
    updatePhone(state, phone){
      state.phone=phone;
    }
  },
  actions: {

  }
})