Reactively displaying form submission confirmation message Vue 3

Question

I want to display a confirmation message when a user submits a form. I'm having trouble doing this though because I don't really understand how reactivity works in Vue.js.

Below is my form -

<form ref="form" @submit.prevent.once="sendEmail">
                  <label class="form__label">Traditional</label><br>
                  <input name="traditional" @input="setTraditional" :value="traditional" type="text" class="form__input" placeholder="電腦" required><br>
                  <label class="form__label">Simplified</label><br>
                  <input name="simplified" @input="setSimplified" :value="simplified" type="text" class="form__input" placeholder="电脑" required><br>
                  <label class="form__label">Pinyin</label><br>
                  <input name="pinyin" @input="setPinyin" :value="pinyin" type="text" class="form__input" placeholder="Diànnǎo" required><br>
                  <label class="form__label">English</label><br>
                  <input name="english" @input="setEnglish" :value="english" type="text" class="form__input" placeholder="computer" required><br>

                  <p class="form__error-message" v-if="error">{{ errorMessage }}</p>
                  <p class="form__success-message" v-else-if="valid">{{ validMessage }}</p>
                  <p class="form__success-message" v-else-if="submitted">{{ formSubmittedMessage }}</p>

                  <button type="submit" value="Submit" class="form__btn">Suggest</button>
                </form>

Once the form is submitted successfully, it'll send an email and reset the form input fields -

sendEmail () {
        emailjs.sendForm(*****, *******, this.$refs.form, ******).then(() => {
          this.$refs.form.reset()
        this.valid = false
        this.submitted = true
          this.formSubmittedMessage = 'Your suggested translation has been sent. It will be reviewed shortly!'
        })
    },

However, it won't remove this message from the DOM <p class="form__success-message" v-else-if="valid">{{ validMessage }}</p> and replace it with this one <p class="form__success-message" v-else-if="submitted">{{ formSubmittedMessage }}</p>

The right message will appear after I interact with an input AGAIN after the form has already been submitted. But I want the right message to display once the email has successfully been sent.

If I console.log(this.formSubmittedMessage) it will display in the console. But <p class="form__success-message" v-else-if="submitted">{{ formSubmittedMessage }}</p> won't react when I update the state and the message this.submitted = true this.formSubmittedMessage = 'Your suggested translation has been sent. It will be reviewed shortly!'