Snippet:-

<template>
  <div id="calendars-results">
    <div class="vs-con-loading__container">
      <div class="vs-row flex justify-between">
        <h4 class="vs-row mb-2">{{ title }}</h4>
        
        <date-picker
          v-if="date"
          class="vs-row"
          v-model="date"
          type="date"
          placeholder="Select Date"
          valueType="format"
          format="YYYY-MM-DD"
          @change="changeDate"
        ></date-picker>
      </div>
      
      <div v-if="total >= data_array.length" class="results-count mt-4">
        Showing {{ data_array.length }} of {{ total }} Results
      </div>

      <div
        v-if="data_array.length > 0"
        class="earning-calendar overflow-x-scroll"
        :class = "[ title === "Earnings Calendar" && reduceButton === false ? "earning-calendar" : '']"
      >
        <div>SideBar docked = {{ !reduceButton }}</div>

        <ticker-table
          v-if="data_array.length > 0"
          :stocks_clickable="stocks_clickable"
          :data_array="data_array"
          :data_headers="data_headers"
          :sort_col_index="sort_col_index"
        ></ticker-table>
      </div>

      <h5 v-else-if="!loading" class="py-8 text-primary text-center">
        <vs-icon
          class="text-xl pr-2"
          icon="icon-info"
          icon-pack="feather"
        ></vs-icon>
        <span>{{ no_results_msg }}</span>
      </h5>
      
    </div>
    
    <div v-if="load_more_button" class="text-center">
      <vs-button class="mt-6" @click="showMore">{{ show_more_text }}</vs-button>
    </div>
    
    <div
      v-else-if="data_array.length > 0 && data_array.length > 20"
      class="text-center"
    >
      <vs-button class="mt-6" @click="showLess">Show Less</vs-button>
    </div>
  
  </div>
</template>

<script>
import DatePicker from "vue2-datepicker";
import "vue2-datepicker/index.css";
import TickerTable from "@/components/shared/tables/ThTickerTable.vue";

export default {
  name: "IPOEarnings",
  components: {
    DatePicker,
    TickerTable
  },
  data() {
    return {
      sort_index: this.sort_col_index,
      date: null,
      loading: false
    };
  },
  props: {
    title: {
      type: String,
      required: true
    },
    no_results_msg: {
      type: String,
      required: true
    },
    default_date: {
      type: String
    },
    data_array: {
      type: Array,
      required: true
    },
    data_headers: {
      type: Array,
      required: true
    },
    sort_col_index: {
      type: Number,
      required: true
    },
    stocks_clickable: {
      type: Boolean,
      default: false
    },
    load_more_button: {
      type: Boolean,
      default: false
    },
    show_more_text: {
      type: String,
      default: ""
    },
    total: {
      type: Number,
      default: 0
    }
  },
  watch: {
    data_array(oldVal, newVal) {
      this.loading = false;
      this.$vs.loading.close("#calendars-results > .con-vs-loading");
    }
  },
  methods: {
    changeDate(currentValue) {
      this.loading = true;
      this.$vs.loading({ container: "#calendars-results", scale: 0.6 });
      this.date = currentValue;
      // harcoded max 200 limit to get results
      this.$emit("update", currentValue, 200);
    },
    showMore() {
      this.$emit("showMore");
    },
    showLess() {
      this.$emit("showLess");
    }
  },
  created() {
    this.loading = true;
    this.date = this.default_date;
  },

  computed: {
    reduceButton: {
      get() {
        return this.$store.state.reduceButton;
      },
      set(val) {
        this.$store.commit("TOGGLE_REDUCE_BUTTON", val);
      }
    }
  }
};
</script>

<style lang="scss">
@media (min-width: 1015px) {
  .earning-calendar {
    overflow: hidden !important;
  }
}
</style>

Issues

(Emitted value instead of an instance of Error)

  Errors compiling template:

  v-else-if="!loading" used on element <h5> without corresponding v-if.

  37 |        ></ticker-table>
  38 |      </div>
  39 |      <h5 v-else-if="!loading" class="py-8 text-primary text-center">
     |          ^^^^^^^^^^^^^^^^^^^^
  40 |        <vs-icon
  41 |          class="text-xl pr-2"

  Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

  46 |      </h5>
  47 |    </div>
  48 |    <div v-if="load_more_button" class="text-center">
     |    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  49 |      <vs-button class="mt-6" @click="showMore">{{ show_more_text }}</vs-button>
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  50 |    </div>
     |  ^^^^^^^^
  51 |    <div
     |  ^^^^^^
  52 |      v-else-if="data_array.length > 0 && data_array.length > 20"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  53 |      class="text-center"
     |  ^^^^^^^^^^^^^^^^^^^^^^^
  54 |    >
     |  ^^^
  55 |      <vs-button class="mt-6" @click="showLess">Show Less</vs-button>
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  56 |    </div>
     |  ^^^^^^^^
  57 |  </div>
     |  ^^^^^^

In case I remove the line containing the ternary operation

  :class = "[ title === "Earnings Calendar" && reduceButton === false ? "earning-calendar" : '']"

, everything functions smoothly. Why does combining the ternary operator in :class and v-if result in errors? Is there a way to utilize both simultaneously? Even after substituting v-if with v-else, the errors persist. However, omitting the ternary line eliminates the errors. What precisely triggers these errors?