hello im using metronic template(vue js version) version 7 with vue2 and node version 16 and most of my pages are made with vuetify my problem is when i use npm run serve everything is ok and my ui structure is how it's supposed to be but when i run npm run build things get messed up like example below.

npm run build:

npm run serve:

this page code :

<v-app>
<v-container fluid>
  <v-row style="margin-top: -5rem" class="mb-1">
    <v-btn
      color="primary"
      @click="selectedIndex = undefined"
    >
      <v-icon>mdi-plus</v-icon>
      {{$t('BUTTONS.New')}}
    </v-btn>
  </v-row>
  <v-row style="background-color: #00695c">

    <v-tabs
        v-model="selectedIndex"
        dark
        background-color="teal darken-3"
        show-arrows
        active-class="phone-book-active-item"
        centered
        optional
    >
      <v-tabs-slider color="teal lighten-3"></v-tabs-slider>

      <v-tab
          v-for="i in phones"
          :key="i.id"
          v-text="i.name"
          @click="selected = i"
      ></v-tab>
    </v-tabs>

  </v-row>


  <v-row>
    <create
        class="mt-12" v-if="selectedIndex === undefined"
        @create="addedNewPhoneBook"
        :phones="phones"
    >

    </create>
    <update
      v-else
      v-model="phones[selectedIndex]"
      @delete="Delete"
      :phones="phones"
    >

    </update>
  </v-row>


</v-container>

.phone-book-active-item{
    background-color: rgba(255 , 255 , 255 , 0.2);
  }