How to specify different margin for different screen sizes using breakpoint in Vuetify
$vuetify.breakpoint.smAndDown
Notice $vuetify
In your case:
<v-flex
v-for="card in filteredCards"
:key="card.id"
:class="{'ma-0': $vuetify.breakpoint.smAndDown, 'ma-5': $vuetify.breakpoint.mdAndUp}"
xs12 sm6 md4
>
Check docs (Breakpoint object)
The helper classes apply margin or padding at a given breakpoint. These classes can be applied using the following format: {property}{direction}-{breakpoint}-{size}.
There is an easier way now:
<v-card
v-for="card in filteredCards"
:key="card.id"
class="ma-0 ma-md-5"
>
{{card.title}}
</v-card>
this applies margin of 0 for XS and SM, and margin 5 for MD and up