How to substitute data from ajax in Vue?

Question

Vue.js

There is a page with a feedback form. The user must enter their email and message. By default, you need to substitute the email address that was used during registration, but the user should be able to change it.

<form>
<input type="text" v-model="email">
<textarea v-model="message"></textarea>
</form>

To substitute the user's email, you need to wait until the request is executed (an Ajax request that stores information about the user in $store.state.user) and data about him comes.
How can I make it so that when the data arrives, it is substituted, but the user can change it?
The working version I got is this:

<script>
...
data() {
    return {
        message: '',
        email: '',
    }
},
watch {
    '$store.state.user': function() {
        this.email = this.$store.state.email;
    }
},
...
</script>

But I don't like him. Although he may be true. Tell me if it is.
I tried using computed like this:

<script>
...
data() {
    return {
        message: ''
    }
},
computed() {
    email() {
        return this.$store.state.user.email;
    }
},
...
</script>

But then, if the user manually changes this address, it will still remain the same and the value from $store will go to the server.
How to do it right?

Answer 1

tried to use computed <...> if the user manually changes this address, it will still remain the same

Add a setter :

email() {
  get() {
    return this.$store.state.user.email;
  },
  set(val) {
    // тут вызов мутации, которая поменяет значение в хранилище
  },
},