TypeError: Cannot read properties of undefined (reading 'setPermissions') in Nuxt.js

[yudanf93]

` const role = this.$store.state.role.roles const user = ['user']

        const roleJson = JSON.stringify(role)
        const userJson = JSON.stringify(user)
        if (roleJson === userJson) {
            this.$gates.setPermissions([
                'view sales',
                'add sales',
                'edit sales',
                'delete sales',
                'import sales',
                'summary report',
                'product report',
                'daily sale report',
                'monthly sale report',
                'daily purchase report',
                'sale report',
                'purchase report',
                'warehouse report',
                'product qty alert',
                'customer report',
                'supplier report',
                'due report',
                'pos'
            ])
            console.log(this.$gates)
        }`

<button v-permission="'add sales'">Add Sales</button>

setting in plugins/vue-gates.js `import Vue from 'vue' import VueGates from 'vue-gates'

Vue.use(VueGates)

export default (_context, inject) => { inject('gates', Vue.prototype.$gates) }`

someone please help me