Can I make 3 errors types without if/else with Vue.js?

Question

Can I make 3 errors types without if/else?

I need to show 3 types of errors (they have different positions):

• common
• errorLogin
• errorPassword

What I have now: I made a renderless function. And I see 2 ways:

• use if/else in the template of the component:

  Component.vue

     <login-error-renderless
       v-if="isError"
       :errorMessage="errorMessage"
       :rowClass="$style.errorLogin"
       :colClass="$style.errorInner"
     >
     </login-error-renderless>
     <login-error-renderless
       v-else-if="isError && messageList[1]"
       :errorMessage="errorMessage"
       :rowClass="$style.errorPassword"
       :colClass="$style.errorInner"
     >
     </login-error-renderless>
     <login-error-renderless
       v-else-if="isError && !messageList[0] && !messageList[1]"
       :errorMessage="errorMessage"
       :rowClass="$style.errorWrap"
       :colClass="$style.errorInner"
     >
     </login-error-renderless>
  

RenderlessFunction.vue

 return h('div', { attrs: { class: this.rowClass } }, [
          h('div', { attrs: { class: this.colClass} }, [
            h('span', {}, this.errorMessage),
        ]),

• use if/else in the renderless function (I'm using this now):

Component.vue

<login-error-renderless
    v-if="isError"
    :errorMessage="errorMessage"
    :classList="classList"
    :messageList = "messages"
>
</login-error-renderless>

Renderless.vue:

props: {
    errorMessage: String,
    classList: Object,
    messageList: Array,
  }, 

render(h) {
const createFunction = (rowClass, colClass = this.classList.innerClass) => h('div', { attrs: { class: rowClass } }, [
  h('div', { attrs: { class: colClass } }, [
    h('span', {}, this.errorMessage),
  ]),
]);

if (this.messageList[0] !== undefined) {
  return createFunction(this.classList.errorLogin);
}
if (this.messageList[1] !== undefined) {
  return createFunction(this.classList.errorPassword);
}
return createFunction(this.classList.error);

},