$vuetify.goTo is not working in v-dialog fullscreen - vue.js

Question

I have been trying to put the back to top button in v-dialog using vuetify1.5 and I have used the following inbuilt method of vuetify that is $vuetify.goTo(0) but it seems to be not working any idea how i resolve this issue .
Or any other alternate way to put a back to top button in v-dialog fullscreen using vuetify.
For example :-
<div id="app">
<v-app id="inspire">
<v-row justify="center">
<v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
<template v-slot:activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
Open Dialog
</v-btn>
</template>
<v-card>
<v-toolbar dark color="primary">
<v-btn icon dark #click="dialog = false">
<v-icon>mdi-close</v-icon>
</v-btn>
<v-toolbar-title>Settings</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn dark text #click="dialog = false">Save</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-list three-line subheader>
<v-subheader>User Controls</v-subheader>
<v-list-item>
<v-list-item-content>
<v-list-item-title>Content filtering</v-list-item-title>
<v-list-item-subtitle>Set the content filtering level to restrict apps that can be downloaded</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-content>
<v-list-item-title>Password</v-list-item-title>
<v-list-item-subtitle>Require password for purchase or use password to restrict purchase</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
<v-divider></v-divider>
<v-list three-line subheader>
<v-subheader>General</v-subheader>
<v-list-item>
<v-list-item-action>
<v-checkbox v-model="notifications"></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Notifications</v-list-item-title>
<v-list-item-subtitle>Notify me about updates to apps or games that I downloaded</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-action>
<v-checkbox v-model="sound"></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Sound</v-list-item-title>
<v-list-item-subtitle>Auto-update apps at any time. Data charges may apply</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-action>
<v-checkbox v-model="widgets"></v-checkbox>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>Auto-add widgets</v-list-item-title>
<v-list-item-subtitle>Automatically add home screen widgets</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
<v-btn
fab
dark
fixed
bottom
right
color="primary"
#click="$vuetify.goTo(0)"
>
<v-icon>keyboard_arrow_up</v-icon>
</v-btn>
</v-card>
</v-dialog>
</v-row>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
dialog: false,
notifications: false,
sound: true,
widgets: false,
}
},
})

Answer 1

To achieve it, you can use scrollIntoView() to scroll on the top element in the modal.
Vuetify doesn't work on events inside the browser. It provides component for the building an application.
new Vue({
el: "#app",
methods: {
scrollToTop: function() {
document
.getElementById("container")
.scrollIntoView({ behavior: "smooth" });
}
}
})
#app {
height: 850px;
}
.container {
height: 800px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="container" id="container">
This is a long div
</div>
<button #click="scrollToTop()">
scroll Top
</button>
</div>