title: Reactively displaying form submission confirmation message Vue 3
body: <p>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.</p>
  <p>Below is my form -</p>
  <pre><code>&lt;form ref=&quot;form&quot; @submit.prevent.once=&quot;sendEmail&quot;&gt;
                    &lt;label class=&quot;form__label&quot;&gt;Traditional&lt;/label&gt;&lt;br&gt;
                    &lt;input name=&quot;traditional&quot; @input=&quot;setTraditional&quot; :value=&quot;traditional&quot; type=&quot;text&quot; class=&quot;form__input&quot; placeholder=&quot;電腦&quot; required&gt;&lt;br&gt;
                    &lt;label class=&quot;form__label&quot;&gt;Simplified&lt;/label&gt;&lt;br&gt;
                    &lt;input name=&quot;simplified&quot; @input=&quot;setSimplified&quot; :value=&quot;simplified&quot; type=&quot;text&quot; class=&quot;form__input&quot; placeholder=&quot;电脑&quot; required&gt;&lt;br&gt;
                    &lt;label class=&quot;form__label&quot;&gt;Pinyin&lt;/label&gt;&lt;br&gt;
                    &lt;input name=&quot;pinyin&quot; @input=&quot;setPinyin&quot; :value=&quot;pinyin&quot; type=&quot;text&quot; class=&quot;form__input&quot; placeholder=&quot;Diànnǎo&quot; required&gt;&lt;br&gt;
                    &lt;label class=&quot;form__label&quot;&gt;English&lt;/label&gt;&lt;br&gt;
                    &lt;input name=&quot;english&quot; @input=&quot;setEnglish&quot; :value=&quot;english&quot; type=&quot;text&quot; class=&quot;form__input&quot; placeholder=&quot;computer&quot; required&gt;&lt;br&gt;
  
                    &lt;p class=&quot;form__error-message&quot; v-if=&quot;error&quot;&gt;{{ errorMessage }}&lt;/p&gt;
                    &lt;p class=&quot;form__success-message&quot; v-else-if=&quot;valid&quot;&gt;{{ validMessage }}&lt;/p&gt;
                    &lt;p class=&quot;form__success-message&quot; v-else-if=&quot;submitted&quot;&gt;{{ formSubmittedMessage }}&lt;/p&gt;
  
                    &lt;button type=&quot;submit&quot; value=&quot;Submit&quot; class=&quot;form__btn&quot;&gt;Suggest&lt;/button&gt;
                  &lt;/form&gt;
  </code></pre>
  <p>Once the form is submitted successfully, it'll send an email and reset the form input fields -</p>
  <pre><code>sendEmail () {
          emailjs.sendForm(*****, *******, this.$refs.form, ******).then(() =&gt; {
            this.$refs.form.reset()
          this.valid = false
          this.submitted = true
            this.formSubmittedMessage = 'Your suggested translation has been sent. It will be reviewed shortly!'
          })
      },
  </code></pre>
  <p>However, it won't remove this message from the DOM <code>&lt;p class=&quot;form__success-message&quot; v-else-if=&quot;valid&quot;&gt;{{ validMessage }}&lt;/p&gt;</code> and replace it with this one <code>&lt;p class=&quot;form__success-message&quot; v-else-if=&quot;submitted&quot;&gt;{{ formSubmittedMessage }}&lt;/p&gt;</code></p>
  <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.</p>
  <p>If I <code>console.log(this.formSubmittedMessage)</code> it will display in the console. But <code>&lt;p class=&quot;form__success-message&quot; v-else-if=&quot;submitted&quot;&gt;{{ formSubmittedMessage }}&lt;/p&gt;</code> won't react when I update the state and the message <code>this.submitted = true this.formSubmittedMessage = 'Your suggested translation has been sent. It will be reviewed shortly!'</code></p>