I have created three select boxes as mentioned in the Vuejs documentation but it doesn’t display the disabled options as the default option. It just shows blank.

Do you know the reason or the solution to this issue?

The code of the select boxes is below.

         <div class="canvas-header">
          <p>Page {{ index + 1 }}</p>

          <select class="form-control mb-lg-1" v-model="selectedTextEffect[index]"
                  @change="applyTextEffect(index + 1)">
            <option disabled value="">Select effect</option>
            <option value="normal">Normal Text</option>
            <option value="glowing">Glowing Text</option>
          </select>
          <select class="form-control mb-lg-1" v-model="selectedFonts[index]" @change="changeFont(index + 1)">
            <option selected disabled value="">Font type</option>
            <option v-for="font in fontOptions" :value="font.val" :key="font.id">
              {{ font.val }}
            </option>
          </select>

          <select class="form-control mb-lg-1" v-model="selectedFontSizes[index]"
                  @change="changeFontSize(index + 1)">
            <option disabled value="">Font size</option>
            <option value="12">12</option>
            <option value="16">16</option>
            <option value="20">20</option>
            <option value="24" selected>24</option>
            <option value="28">28</option>
            <option value="32">32</option>
            <option value="36">36</option>
            <option value="40">40</option>
          </select>
        ...