Applying classes on specific viewport breakpoints

Question

• Stack: Nuxt.js + Vuetify.js
• Issue: Setting classes depending on breakpoint behaves abnormally

• Attempt: In ~/components/SubComponent.vue I want to display text with large font on small screens and over, and colorize my text in red only on small screens:

  <v-flex
    xs12
    sm4
    :class="{
      'display-3': $vuetify.breakpoint.smAndUp,
      'red--text': $vuetify.breakpoint.xs
    }">
    Sub component
  </v-flex>
  

• Output: Whenever I refresh, I see the text is red and small on small screens (my laptop).

• Note: I get weird behaviors with this approach whenever I try to combine more classes carefully, but here I am just providing a minimalist example.

• Question: Why this happens and how to overcome it?

• In case you are curious this is a link to reproduce the issue: here