Vue.js plugin error : undefined - vue.js

Question

I am trying to use a plugin from GodofBrowser, as stated but I am getting an error
this.$dialog.confirm('Please confirm to continue')
Uncaught TypeError: Cannot read property 'confirm' of undefined
so this.$plugin is undefined .... why ?
// I installed it via npm
npm install vuejs-dialog
main.js
// I imported it
import Vue from "vue"
import VuejsDialog from "vuejs-dialog"
// and I told Vue to install it
Vue.use(VuejsDialog)
Then I am trying to use it in my App.vue, on 'click' method :
App.vue
<template>
<div id="app" class="container">
<ul class="navigation">
<li id="home"><router-link :to="{ name: 'Home' }" >Home</router-link></li>
<li id="shoppinglists" v-if="!logged">
<span #click.capture="clicked">
<router-link :to="{ name: 'ShoppingLists' }" >Shopping Lists</router-link>
</span>
</li>
<li v-else id="shoppinglists"><router-link :to="{ name: 'ShoppingLists', params: { id: currentUserId } }" >Shopping Lists</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
import store from '#/vuex/store'
import { mapGetters } from 'vuex'
export default {
name: 'app',
methods: {
clicked: (event) => {
event.preventDefault()
console.log('clicked!'). // got it in console
this.$dialog.confirm('Please confirm to continue') // !ERROR
.then(function () {
console.log('Clicked on proceed')
})
.catch(function () {
console.log('Clicked on cancel')
})
}
},
computed: {
...mapGetters({ currentUserId: 'getCurrentUserId', logged: 'getLogged' })
},
store
}
</script>

Answer 1

This is a common stumbling block with Vue applications -
you can find the following in the official Vue documentation:
Don’t use arrow functions on an options property or callback, such as
created: () => console.log(this.a) or vm.$watch('a', newValue =>
this.myMethod()).
Since arrow functions are bound to the parent
context, this will not be the Vue instance as you’d expect, often
resulting in errors such as Uncaught TypeError: Cannot read property
of undefined or Uncaught TypeError: this.myMethod is not a function.
Try using a normal function instead:
methods: {
clicked: function (event) {
event.preventDefault()
console.log('clicked!'). // got it in console
this.$dialog.confirm('Please confirm to continue') // !ERROR
.then(function () {
console.log('Clicked on proceed')
})
.catch(function () {
console.log('Clicked on cancel')
})
}
}

Answer 2

Should use : Vue.prototype , not this !
Vue.prototype.$dialog.confirm('Please confirm to continue')