Positional problems with vuetify speed dial - vue.js

Question

I am wanting to use the vuetify speeddial component in my app, but I am getting wierd positioning errors, what I am wanting is the button to be clicked and then the additional options slide to the left of it,
As you can see from the image above they are positioned on the left but far to far from the original "parent" button, I have attemped to make a codesandbox but the results are inconclusive.
https://codesandbox.io/s/vuetify-playground-forked-gwtkc?file=/src/components/SpeedDial.vue
And finally here is my component code,
<template>
<v-speed-dial
v-model="fab"
direction="left"
transition="slide-x-reverse-transition"
>
<template v-slot:activator>
<v-btn
v-model="fab"
color="blue darken-2"
dark
fab
>
<v-icon v-if="fab">mdi-close</v-icon>
<v-icon v-else>mdi-account-circle</v-icon>
</v-btn>
</template>
<v-btn fab dark small color="green">
<v-icon>mdi-pencil</v-icon>
</v-btn>
<v-btn fab dark small color="indigo">
<v-icon>mdi-plus</v-icon>
</v-btn>
<v-btn fab dark small color="red">
<v-icon>mdi-delete</v-icon>
</v-btn>
</v-speed-dial>
</template>
<script>
export default {
name: 'QuickSpeedDial',
data() {
return {
fab: false,
tabs: null
}
},
computed: {
activeFab () {
switch (this.tabs) {
case 'one': return { class: 'purple', icon: 'account_circle' }
case 'two': return { class: 'red', icon: 'edit' }
case 'three': return { class: 'green', icon: 'keyboard_arrow_up' }
default: return {}
}
},
}
}
</script>

Answer 1

You need to add a style as it says on the official website.
...
<style>
.v-speed-dial {
position: absolute;
}
.v-btn--floating {
position: relative;
}
</style>
...