Как загрузить диалоговое окно перед обновлением/покиданием страницы в vue js?

Я работаю над формой и хочу спросить пользователя, хотят ли они представить свой прогресс, прежде чем покинуть страницу. Я использую vue js и vuetify:

            <v-dialog
                v-model="showExitDialog"
            >
                <v-card>
                    <v-card-title>Do you want to submit?</v-card-title>
                    <v-card-actions>
                        <v-spacer/>
                        <v-btn @click="submit">Yes</v-btn>
                        <v-btn @click="showExitDialog = false">No</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>

'showExitDialog: false' - это то, что написано в данных

Моя текущая функция внутри созданного хука выглядит так:

created() {
    document.addEventListener("beforeunload", function(event) { 
        this.showExitDialog = true;
    });
    console.log('1234567890');
},

Это вообще не вызывает диалоговое окно, но функция журнала фактически регистрируется в консоли, и я не могу точно сказать, как это исправить, поскольку ошибок нет.

Как я могу сделать так, чтобы v-диалог отображался после обновления страницы/после того, как пользователь покинет страницу?