[Vuejs]-Use CSS classes in Vue based on breakpoints

Add !important to your styles. Vuetify adds its default style to the whole v-app so you need to override it.

.pagemargin{
  margin-right: 100px !important;
  margin-left: 100px !important;
  color: red !important;
}

Using !important might work, but in long term as your application gets bigger, it could be costly. You should instead, solve this by providing a CSS that has a higher specificity than that of Vuetify. I provide you with an example:

<template>
  <div class="my-div">
    <v-btn :class="{'my-padding': !$vuetify.breakpoint.xs}" tile outlined color="success">
      View
    </v-btn>
  </div>
</template>

<style>
 /* this wont work */
.my-div .my-padding {
  padding-right: 200px;
  padding-left: 200px;
}

/* this works */
.my-div .v-btn.my-padding {
  padding-right: 200px;
  padding-left: 200px;
}
</style>

<style scoped>
/* this also works */
.my-div .my-padding {
  padding-right: 200px;
  padding-left: 200px;
}
</style>

You can read more about specificity here.