Child and parent ripple triggered - vue.js

Question

I'm using vuetify to design a 'card' component.
I have a parent div with a child button. Now, when I click the button, the ripple effect on the div is triggered.
How can I fix this?
<template>
<div>
<v-card v-ripple="true">
<h3>
<v-card-title>{{ title }}</v-card-title>
</h3>
<v-layout row>
<v-flex grow>
<v-card-text>
{{ plaats }}
<br />
{{ sub_title }}
</v-card-text>
</v-flex>
<v-flex shrink>
<v-card-actions>
<v-btn small color="blue" fab>
<v-icon medium color="white">mdi-calendar</v-icon>
</v-btn>
<v-btn small color="green" fab>
<v-icon medium color="white">mdi-calendar-check</v-icon>
</v-btn>
<v-btn small color="red" fab>
<v-icon medium color="white">mdi-calendar-remove</v-icon>
</v-btn>
</v-card-actions>
</v-flex>
</v-layout>
</v-card>
</div>
</template>

Answer 1

The solution was indeed Event.stopPropagation but I had to add it to the mousedown action.
So #mousedown.stop and then add your function with #click.stop="null" as #Frank mentioned before.

Answer 2

Note #mousedown event will not fire on mobile, thus we also need to
add #touchstart.
Codepen
<v-list>
<v-list-tile :ripple="true" #click="">
<v-list-tile-action>
<v-btn
#click.stop=""
#mousedown.stop=""
#touchstart.stop=""
>Click</v-btn>
</v-list-tile-action>
<v-list-tile-content class="pl-5">
Click tile
</v-list-tile-content>
</v-list-tile>
</v-list>

Answer 3

You're looking for Event.stopPropagation. Add #click.stop="null" to your button(s). Of course you can/should replace null with your own method.

Answer 4

if your vuetify css is separate, not in your app.js,
the solution that worked for me is to put the app.js script outside the body, when it is inside the js loads first than the vuetify css.
<!-- ripple error occurs randomly -->
<script src="{{ URL::asset('js/vLib.js') }}" defer></script>
</body>
<!-- Should be outside the body -->
</body>
<script src="{{ URL::asset('js/vLib.js') }}" defer></script>