I'm Working on a complex vue form, where I'm using dynamic components to render multiple parts of the form. Using and , it first renders the default section, then the respective sections when I click on specific tabs. I have to start from "Ship From" tab but something on "Label Specification" tab depends on the Shop From section (see below img). So I can solve the problem by rendering the "Label Specification" section first. But my requirement is to start from "Ship From" section. So either I have to preload all the dynamic components or start at Label Spec then switch fast before user can see it. How can I solve the issue? here is the code for tabs and components:

<button
      v-for="(tabname, index) in tabnames"
      v-bind:key="index"
      v-bind:class="['tab-button', { active: currentTabIndex === index }]"
      v-on:click="
        currentTab = tabs[index];
        currentTabIndex = index;
      "
    >
      <h3>
        <b>{{ tabname }}<span class="text-danger">* </span></b>
      </h3>
    </button>

    <keep-alive>
      <component
        v-bind:is="currentTabComponent"
        v-bind="currentProps"
        class="tab"
        @jsonresponse="
          saveSection(Object.keys(currentResponse)[0], ...arguments)
        "
      ></component>
    </keep-alive>