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 class="form__success-message" v-else-if="soFarSoGood">
  {{ soFarSoGoodMsg }}
</p>

statuses() {
  return {
    error: false,
    soFarSoGood: false,
    submissionReady: false,
    submitted: false,
    };
  },
messages() {
  return {
    errorMsg: "",
    soFarSoGoodMsg: "All good so far! 👌",
    submittedMsg: "",
    };
  },

The problem I'm experiencing is this will return null in the DOM.

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.

messages() {
    return {
      errorMsg: "",
      soFarSoGoodMsg: "",
      submittedMsg: "",
    };
  },
  methods: {
    approveFormStatus(input) {
      if (input !== null) {
       this.soFarSoGoodMsg = "All good so far! 👌"; 
      }
    }
  }

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.

What's the solution to this and what am I misunderstanding?

Cheers