How to properly set up casl/vue for vue?

Question

Vue.js

Good afternoon.

How to install abilities correctly?
I get a list of ability strings in an array from the server, set them like this

try {
      const {data} = await this.$axios.get('abilities')
     
      this.$ability.update([
        {actions: data.data, subject: 'all'}
      ])
      }

I check It gives false I tried to install it like this
$can('role-access')

// импортировал defineAbility
try {
      const {data} = await this.$axios.get('abilities')
      
      defineAbility((can) => {
        can(data.data, 'all')
      })
      }

Doesn't work either.
Where is the mistake?

Who is experienced, tell me how best to do it, get rights with each click or save storage in the locale at the entrance?

Answer 1

It works like this.

// import { AbilityBuilder } from '@casl/ability';
const {data} = await this.$axios.get('abilities')
const { can, rules } = new AbilityBuilder();

can(data.data, 'all');

this.$ability.update(rules);

Instruction