label invertido Vuetify – Stack Overflow em Português


Quando copio e colo qualquer código do vuetify fica invertido o Label porém no codepen funciona normal. Já tentei definir no Style para personalizar mas não dá certo. pois tem q ajeitar os fields também. Como faz para manter o label a esquerda?

https://codepen.io/pen/?&editable=true&editors=101=https%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Fgrids%2F

<template>

    <v-form v-model="valid">
      <v-container>
        <v-row>
          <v-col
            cols="12"
            md="4"
          >
            <v-text-field
              v-model="firstname"
              :rules="nameRules"
              :counter="10"
              label="First name"
              required
            ></v-text-field>
          </v-col>
  
          <v-col
            cols="12"
            md="4"
          >
            <v-text-field
              v-model="lastname"
              :rules="nameRules"
              :counter="10"
              label="Last name"
              required
              outlined
            ></v-text-field>
          </v-col>
  
          <v-col
            cols="12"
            md="4"
          >
            <v-text-field
              v-model="email"
              :rules="emailRules"
              label="E-mail"
              required
            ></v-text-field>
          </v-col>
        </v-row>
      </v-container>
    </v-form>

</template>

label trocados estão no lado direito, sendo o correto pelo esquerdo

<style scope>
    label{
        left: 0 !important;
        right: auto!important;
    }
    .v-label--active{
        transform: translateY(-25px)translateX(-12px) scale(.75)!important;
    }
</style>