title: Setting a default value in the composition API (Vue 3)
body: <p>I've created some messages for my form. One of them is a message where the content will never change (As opposed to my error message where the content will change depending on the error).</p>
  <pre><code>&lt;p class=&quot;form__success-message&quot; v-else-if=&quot;soFarSoGood&quot;&gt;
    {{ soFarSoGoodMsg }}
  &lt;/p&gt;
  
  statuses() {
    return {
      error: false,
      soFarSoGood: false,
      submissionReady: false,
      submitted: false,
      };
    },
  messages() {
    return {
      errorMsg: &quot;&quot;,
      soFarSoGoodMsg: &quot;All good so far! &quot;,
      submittedMsg: &quot;&quot;,
      };
    },
  </code></pre>
  <p>The problem I'm experiencing is this will return null in the DOM.</p>
  <p>However, the intended message will appear in the DOM if I set the value to an empty string initially and I update the message once the state of the form changes.</p>
  <pre><code>messages() {
      return {
        errorMsg: &quot;&quot;,
        soFarSoGoodMsg: &quot;&quot;,
        submittedMsg: &quot;&quot;,
      };
    },
    methods: {
      approveFormStatus(input) {
        if (input !== null) {
         this.soFarSoGoodMsg = &quot;All good so far! &quot;; 
        }
      }
    }
  </code></pre>
  <p>I want this message to be the default message for that specific condition. I don't want to have to set it in one of my methods.</p>
  <p>What's the solution to this and what am I misunderstanding?</p>
  <p>Cheers</p>