Vuetify Outlined text field label position is wrong when active

I am using "@nuxtjs/vuetify": "^1.11.3" for my project. Everything was working fine. Recently I am having a problem on outlined text-field or select. When active label staying under the border. I am not exactly sure how it came to this, or how I can fix this.

I am providing sample on how I am implementing them.

  <v-col md="6" sm="12" cols="12" class="colClassTwo no-limit">
    <h2>Send Us A Message</h2>
    <div class="formDiv">
      <div class="formClassDiv">
        <v-form ref="form" lazy-validation class="formClass">
          <v-text-field
            label="Your Name"
            color="#fb6331"
            background-color="#fff"
            outlined
            v-model="data.name"
            :rules="[rules.required]"
          ></v-text-field>

          <v-text-field
            label="Your Email"
            color="#fb6331"
            background-color="#fff"
            outlined
            v-model="data.email"
            :rules="[rules.required, rules.email]"
          ></v-text-field>

          <v-text-field
            label="Your Contact"
            color="#fb6331"
            background-color="#fff"
            outlined
            :rules="[rules.required]"
            v-model="data.phone"
          ></v-text-field>

          <v-text-field
            label="Your Message (Optional)"
            color="#fb6331"
            background-color="#fff"
            outlined
            v-model="data.currentVendor"
          ></v-text-field>

          <div style="text-align: center">
            <a @click="handleClick" class="btn__gradient-fill"
              ><span class="btn-text"
                ><p class="text-gradient mb-0">Submit</p></span
              ></a
            >
          </div>
        </v-form>
      </div>
    </div>
  </v-col>

Any suggestion would be welcomed