📖 Update docs for TypeScript in Vue 3 using createMongoAbility

[jd-solanki]

Describe the bug
ATM, docs for Vue + TypeScript is out dated and uses old way of defining the Ability using Ability class however in docs it's recommended to use the createMongoAbility. I checked other page but it confuses more on what to do for adding typescript support in vue 3.

To Reproduce
Steps to reproduce the behavior:
n/a

Expected behavior
n/a

Interactive example (optional, but highly desirable)
n/a

CASL Version
n/a

Environment:
n/a

[hungify2022]

We have two approaches to implement.

1. Use Object ability subject and action

import type { AbilityClass } from '@casl/ability'
import { Ability } from '@casl/ability'

export type Actions = 'create' | 'read' | 'update' | 'delete' | 'manage'

export type Subjects = 'Auth' | 'all'

export interface UserAbility {
  action: Actions
  subject: Subjects
}

const ability = new PureAbility<[Actions, Subject]>()

// update
ability.update([{
 action: "..."
 subject: "..."
}]); 

2. Use AbilityBuilder to specify each rule

export type AppAbility = PureAbility<[Actions, Subjects]>
export function buildAbilityFor(roleId: number) {
  const { can, build } = new AbilityBuilder<AppAbility>(
    PureAbility,
  )

  if (roleId === Roles.Manager)
    can('manage', 'all')

  else if (roleId === Roles.Guest)
    can('read', 'Auth')

  return build()
}

// ability.ts
const ability = new PureAbility<[Actions, Subject]>()

// component.vue
const ability = useAbility()

 watchEffect(() => {
    const roleId = isAuthenticated.value ? Roles.Manager : Roles.Guest

    const { rules } = buildAbilityFor(roleId)

    ability.update(rules) 
  })