Why are storage fields empty when writing to an object?

Question

Vue.js

I update 4 fields (first name, last name, email and phone) of my store (VUEX), through inputs on a certain form (using v-model) , after which I push these updated fields into an object and write it to localStorage.
Problem:
When writing, all the necessary store fields change, I see this through vue dev tools, but when I form an object from the values ​​​​of these stor-a fields, then my fields in this object are empty.
Question:
How to get values, not empty strings?
Component code:

<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>

VUEX store code:

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: {

  }
})

Cards below:

Answer 1

What does your state look like:

state: {
  user:{
    name:'',

How are you trying to update it:

updateName(state, name){
  state.name=name;

So what about your name - should it be in the root or be part of the user? The same applies to other user-editable values.
Not directly related to your problem, but it hurts the eye a lot: four calculated properties, all the same - somehow too much. Do one thing - the user object will be wrapped in a Proxy to intercept the setting of property values:

user() {
  return new Proxy(this.$store.state.user, {
    set: (target, prop, value) => {
      this.$store.commit('updateUser', { [prop]: value });
      return true;
    },
  });
},

And the mutation will also be one:

updateUser(state, user) {
  Object.assign(state.user, user);
},

In v-model, respectively, the properties of the object are specified:

<input v-model="user.name">
<input v-model="user.surname">
<input v-model="user.email">
<input v-model="user.phone">

this.$store.state.user.LS.push(userObj);
<...>
this.$store.state.isAdding=false;

Why are you doing the state change directly? Make the appropriate mutations.