diff --git a/.eslintrc b/.eslintrc
index 6fba2b2e7..656f77ae1 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -54,7 +54,8 @@
         "packages/*/spec/**/*.{js,ts}"
       ],
       "env": {
-        "jest": true
+        "jest": true,
+        "browser": true
       },
       "globals": {
         "expect": true,
diff --git a/packages/casl-vue/README.md b/packages/casl-vue/README.md
index bb83e3103..8e8f2e522 100644
--- a/packages/casl-vue/README.md
+++ b/packages/casl-vue/README.md
@@ -4,7 +4,7 @@
 [![](https://img.shields.io/npm/dm/%40casl%2Fvue.svg)](https://www.npmjs.com/package/%40casl%2Fvue)
 [![CASL Join the chat](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/stalniy-casl/casl)
 
-This package allows to integrate `@casl/ability` with [Vue] application. So, you can show or hide UI elements based on user ability to see them. This package provides a Vue plugin which defines `$ability` object and `$can` method for all components. Also package provides functional `Can` component (not included in the plugin), both allow to hide or show UI elements based on the user ability to see them.
+This package allows to integrate `@casl/ability` with [Vue 3] application. So, you can show or hide UI elements based on user ability to see them.
 
 ## Installation
 
@@ -18,65 +18,134 @@ pnpm add @casl/vue @casl/ability
 
 ## Getting started
 
-If you don't plan to use multiple `Ability` instances across your application (99.9% likelihood that you don't), you can pass `Ability` instance as a 2nd argument to `Vue.use`:
+This package provides a Vue plugin which defines `$ability` object and `$can` method for all components, in the same way as it was for Vue 2.x. Additionally, this package provides `useAbility` and `provideAbility` hooks that can be used with new [Vue Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html).
 
-```js @{data-filename="main.js"}
-import Vue from 'vue';
+### Vue plugin if you need some backward compatibility
+
+`abilitiesPlugin` is left for backward compatibility with Vue 2.x and provides global `$ability` and `$can` properties. However,`Ability` instance is now a mandatory argument for plugin:
+
+```js
+import { createApp } from 'vue';
 import { abilitiesPlugin } from '@casl/vue';
 import ability from './services/ability';
 
-Vue.use(abilitiesPlugin, ability);
+createApp()
+  .use(abilitiesPlugin, ability)
+  .mount('#app');
 ```
 
-but if you one from that 0.1%, you need to pass it in `Vue` constructor:
+`Can` component is not registered by the plugin, so we can decide whether we want to use component or `v-if` + `$can` method. Also, this helps tree shaking to remove it if we decide to not use it. So, to register component globally just use global API ([read more](#can-component)):
 
-```js @{data-filename="main.js"}
-import Vue from 'vue';
-import { abilitiesPlugin } from '@casl/vue';
-import ability from './services/ability';
+```js
+import { Can } from '@casl/vue';
 
-Vue.use(abilitiesPlugin);
+createApp()
+  .use(abilitiesPlugin, ability)
+  .component(Can.name, Can)
+  .mount('#app');
+```
+
+Later, we can use either `$ability` or `$can` method in any component:
 
-new Vue({
-  el: '#app',
-  ability
-})
+```vue
+<template>
+  <div v-if="$can('create', 'Post')">
+    <a @click="createPost">Add Post</a>
+  </div>
+</template>
 ```
 
-The difference is that the 1st approach defines `Ability` instance on `Vue.prototype` and 2nd one passes ability from parent to child in component tree.
+`globalProperties` is the same concept as a global variables which make life more complicated because any component has access to them (i.e., implicit dependency) and we need to ensure they don't introduce name collisions by prefixing them. So, instead of exposing `$ability` and `$can` as globals, we can use [provide/inject API](https://v3.vuejs.org/guide/component-provide-inject.html) to get access to `$ability`:
 
-> The 2nd approach potentially may slowdown components creation but you will not notice this ;)
+```js
+createApp()
+  .use(abilitiesPlugin, ability, {
+    defineGlobals: false // disable globalProperties pollution
+  })
+  .mount('#app');
+```
 
-The plugin doesn't register `Can` component, so you can decide whether to use it or not. In most cases, `$can` function is enough and it's more lightweight than `Can` component.
+To inject an `Ability` instance, we can use `ABILITY_TOKEN`:
 
-To use `Can` functional component, you need to import it in a particular component or register it globally:
+```vue
+<template>
+  <div>
+    <div v-if="$ability.can('create', 'Post')">
+      <a @click="createPost">Add Post</a>
+    </div>
+  </div>
+</template>
 
-```js
-import Vue from 'vue';
-import { Can } from '@casl/vue';
+<script>
+import { ABILITY_TOKEN } from '@casl/vue';
 
-Vue.component('Can', Can);
+export default {
+  inject: {
+    $ability: { from: ABILITY_TOKEN }
+  }
+}
+</script>
 ```
 
-> See [CASL guide](https://casl.js.org/v5/en/guide/intro) to learn how to define `Ability` instance.
+This is a bit more complicated but allows us to be explicit. This works especially good with new [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html):
 
-## Check permissions in templates
+```vue
+<template>
+  <div>
+    <div v-if="can('create', 'Post')">
+      <a @click="createPost">Add Post</a>
+    </div>
+  </div>
+</template>
 
-To check permissions, you can use `$can` method in any component, it accepts the same arguments as `Ability`'s `can`:
+<script>
+import { useAbility } from '@casl/vue';
+
+export default {
+  setup() {
+    // some code
+    const { can } = useAbility();
+
+    return {
+      // other props
+      can
+    };
+  }
+}
+</script>
+```
 
-```html
+### provideAbility hook
+
+Very rarely, we may need to provide a different `Ability` instance for a sub-tree of components, and to do this we can use `provideAbility` hook:
+
+```vue
 <template>
-  <div v-if="$can('create', 'Post')">
-    <a @click="createPost">Add Post</a>
-  </div>
+  <!-- a template -->
 </template>
+
+<script>
+import { provideAbility } from '@casl/vue';
+import { defineAbility } from '@casl/ability';
+
+export default {
+  setup() {
+    provideAbility(defineAbility((can) => {
+      // ...
+    }))
+  }
+}
+</script>
 ```
 
-## Can component
+> See [CASL guide](https://casl.js.org/v5/en/guide/intro) to learn how to define `Ability` instance.
+
 
-There is an alternative way you can check your permissions in the app by using the `Can` component. Instead of using `v-if="$can(...)"`, we can do this:
+### Can component
 
-```html
+There is an alternative way we can check permissions in the app, by using `Can` component:
+
+```vue
 <template>
   <Can I="create" a="Post">
     <a @click="createPost">Add Post</a>
@@ -90,23 +159,27 @@ It accepts default slot and 5 properties:
 * `on` - checked subject. Has `a`, `an`, `this` aliases
 * `field` - checked field
 
-  ```html
-  <Can I="read" :this="post" field="title">
-    Yes, you can do this! ;)
-  </Can>
+  ```vue
+  <template>
+    <Can I="read" :this="post" field="title">
+      Yes, you can do this! ;)
+    </Can>
+  </template>
   ```
 
 * `not` - inverts ability check and show UI if user cannot do some action:
 
-  ```html
-  <Can not I="create" a="Post">
-    You are not allowed to create a post
-  </Can>
+  ```vue
+  <template>
+    <Can not I="create" a="Post">
+      You are not allowed to create a post
+    </Can>
+  </template>
   ```
 
 * `passThrough` - renders children in spite of what `ability.can` returns. This is useful for creating custom components based on `Can`. For example, if you need to disable button based on user permissions:
 
-  ```html
+  ```vue
   <template>
     <div>
       <Can I="delete" a="Post" passThrough v-slot="{ allowed }">
@@ -116,16 +189,11 @@ It accepts default slot and 5 properties:
   </template>
   ```
 
-`Can` component has several downsides in comparison to `$can` function.
-
-1. It's more expensive to use because Vue needs to spend some time creating it
-2. It adds additional nesting, that makes code harder to read
+#### Property names and aliases
 
-### Property names and aliases
+As you can see from the code above, the component name and its property names and values create an English sentence, actually a question. The example above reads as "Can I delete a Post?".
 
-As you can see from the code above, the component name and its property names and values create an English sentence, actually a question. The example above reads as "Can I create a Post?".
-
-There are several other property aliases which allow constructing a readable question:
+There are several other property aliases which allow constructing a readable question. And here is a guidance to help you do this:
 
 * use the `a` (or `an`) alias when you check by Type
 
@@ -133,7 +201,7 @@ There are several other property aliases which allow constructing a readable que
   <Can I="read" a="Post">...</Can>
   ```
 
-* use `this` alias instead of `a` when you check action on a particular instance. So, the question can be read as "Can I read this *particular* post?"
+* use `this` alias when you check action on a particular instance. So, the question can be read as "Can I read this *particular* post?"
 
   ```html
   <Can I="read" :this="post">...</Can>
@@ -146,11 +214,41 @@ There are several other property aliases which allow constructing a readable que
   <Can do="read" :on="post" field="title">...</Can>
   ```
 
+#### Component vs reactive Ability
+
+Let's consider PROS and CONS of both solutions in order to make the decision.
+
+**Can Component**:
+
+**PROS**:
+* declarative
+* can cache permissions check results until props or ability changes (currently does not)
+
+**CONS**:
+* more expensive to create
+* adds nesting in template
+* harder to use in complex boolean expressions
+* harder to pass permission check as a prop to another component
+
+**Reactive Ability**:
+
+**PROS**:
+* easy to use
+* declarative in template with `v-if`
+* easy to pass as a prop to another component
+* easy to use in complex boolean expressions (either in js or in template)
+
+**CONS**:
+* more expensive to check, conditions are re-evaluated on each re-render
+
+Despite the fact that reactive ability check is a bit more expensive, they are still very fast and it's recommended to use reactive ability instead of `<Can>` component.
+
 ## TypeScript support
 
 The package is written in TypeScript, so don't worry that you need to keep all the properties and aliases in mind. If you use TypeScript, your IDE will suggest you the correct usage and TypeScript will warn you if you make a mistake.
 
-To define application specific `Ability` type, create a separate file, for example:
+There are few ways to use TypeScript in a Vue app, depending on your preferences. But let's first define our `AppAbility` type:
+
 
 ```ts @{data-filename="AppAbility.ts"}
 import { Ability, AbilityClass } from '@casl/ability';
@@ -162,43 +260,80 @@ export type AppAbility = Ability<[Actions, Subjects]>;
 export const AppAbility = Ability as AbilityClass<AppAbility>;
 ```
 
-By default, `Vue['$ability']` is declared as `AnyAbility` type. So, to make it more useful for our app, we need to redeclare `Vue['$ability']` type. To do so, create `src/shims-ability.d.ts` file:
+### Augment Vue types
+
+There is no other way for TypeScript to know types of global properties without augmentation. To do this, let's add `src/shims-ability.d.ts` file with the next content:
 
 ```ts @{data-filename="shims-ability.d.ts"}
 import { AppAbility } from './AppAbility'
 
-declare module 'vue/types/vue' {
-  interface Vue {
+declare module 'vue' {
+  interface ComponentCustomProperties {
     $ability: AppAbility;
     $can(this: this, ...args: Parameters<this['$ability']['can']>): boolean;
   }
 }
-declare module 'vue/types/options' {
-  interface ComponentOptions<V extends Vue> {
-    ability?: AppAbility;
+```
+
+### Composition API
+
+With composition API, we don't need to augment Vue types and can use `useAbility` hook:
+
+```ts
+import { useAbility } from '@casl/vue';
+import { AppAbility } from './AppAbility';
+
+export default {
+  setup(props) {
+    const { can } = useAbility<AppAbility>();
+
+    return () => can('read', 'Post') ? 'Yes' : 'No';
   }
 }
 ```
 
-And update `tsconfig.json` to replace default vue modules augmentation (i.e., `@casl/vue/patch`) with application specific:
-
-```json
-{
-  "compilerOptions": {
-    // other options
-    "baseUrl": ".",
-    "paths": {
-      // other mappings
-      "@casl/vue/patch": [
-        "src/shims-ability.d.ts"
-      ]
-    }
+Additionally, we can create a separate `useAppAbility` hook, so we don't need to import `useAbility` and `AppAbility` in every component we want to check permissions but instead just import a single hook:
+
+
+```ts @{data-filename="hooks/useAppAbility.ts"}
+import { useAbility } from '@casl/vue';
+import { AppAbility } from '../AppAbility';
+
+export const useAppAbility = () => useAbility<AppAbility>();
+```
+
+### Options API
+
+It's also possible to use `@casl/vue` and TypeScript with options API. By default, `ABILITY_TOKEN` is typed as `InjectionKey<Ability>`, to cast it to `InjectionKey<AppAbility>`, we need to use a separate variable:
+
+```ts @{data-filename="AppAbility.ts"}
+import { InjectionKey } from 'vue';
+import { ABILITY_TOKEN } from '@casl/vue';
+
+// previous content that defines `AppAbility`
+
+export const TOKEN = ABILITY_TOKEN as InjectionKey<AppAbility>;
+```
+
+and now, when we inject `AppAbility` instance, we will have the correct types:
+
+```vue
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { TOKEN } from './AppAbility';
+
+export default defineComponent({
+  inject: {
+    ability: { from: TOKEN }
   },
-  // other options
-}
+  created() {
+    this.ability // AppAbility
+  }
+});
+</script>
 ```
 
-> Read [Vue TypeScript](https://vuejs.org/v2/guide/typescript.html) to understand why it's so hard to properly type Vue plugins.
+> Read [Vue TypeScript](https://v3.vuejs.org/guide/typescript-support.html) for more details.
 
 ## Update Ability instance
 
@@ -217,9 +352,13 @@ Let's imagine that server returns user with a role on login:
 
 <script>
 import { AbilityBuilder, Ability } from '@casl/ability';
+import { ABILITY_TOKEN } from '@casl/vue';
 
 export default {
   name: 'LoginForm',
+  inject: {
+    $ability: { from: ABILITY_TOKEN }
+  },
   data: () => ({
     email: '',
     password: ''
@@ -264,4 +403,4 @@ If you'd like to help us sustain our community and project, consider [to become
 [MIT License](http://www.opensource.org/licenses/MIT)
 
 [contributing]: https://github.com/stalniy/casl/blob/master/CONTRIBUTING.md
-[Vue]: https://vuejs.org/
+[Vue 3]: https://v3.vuejs.org/guide/introduction.html
diff --git a/packages/casl-vue/index.d.ts b/packages/casl-vue/index.d.ts
deleted file mode 100644
index 7236c51a0..000000000
--- a/packages/casl-vue/index.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './dist/types';
diff --git a/packages/casl-vue/package.json b/packages/casl-vue/package.json
index 428c44371..30ef75d77 100644
--- a/packages/casl-vue/package.json
+++ b/packages/casl-vue/package.json
@@ -5,7 +5,7 @@
   "main": "dist/umd/index.js",
   "module": "dist/es5m/index.js",
   "es2015": "dist/es6m/index.mjs",
-  "typings": "./index.d.ts",
+  "typings": "dist/types/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/es6m/index.mjs",
@@ -57,7 +57,6 @@
     "@semantic-release/changelog": "^5.0.1",
     "@semantic-release/git": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "4.13.0",
-    "@vue/test-utils": "^1.0.0-beta.25",
     "chai": "^4.1.0",
     "chai-spies": "^1.0.0",
     "eslint": "^7.1.0",
@@ -71,7 +70,7 @@
     "semantic-release": "17.3.2",
     "ts-jest": "^26.4.4",
     "typescript": "~4.0.0",
-    "vue": "^2.5.13",
+    "vue": "^3.0.5",
     "vue-template-compiler": "^2.5.13"
   },
   "files": [
diff --git a/packages/casl-vue/patch.d.ts b/packages/casl-vue/patch.d.ts
deleted file mode 100644
index 2d5f3a5ca..000000000
--- a/packages/casl-vue/patch.d.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import Vue from 'vue';
-import { AnyAbility } from '@casl/ability';
-
-declare module 'vue/types/vue' {
-  interface Vue {
-    $ability: AnyAbility
-    $can(this: this, ...args: Parameters<this['$ability']['can']>): boolean
-  }
-}
-
-declare module 'vue/types/options' {
-  interface ComponentOptions<V extends Vue> {
-    ability?: AnyAbility;
-  }
-}
diff --git a/packages/casl-vue/spec/can.spec.js b/packages/casl-vue/spec/can.spec.js
index 9ffb869da..5f5006b3c 100644
--- a/packages/casl-vue/spec/can.spec.js
+++ b/packages/casl-vue/spec/can.spec.js
@@ -1,75 +1,81 @@
-import { createLocalVue, mount } from '@vue/test-utils'
+import { createApp, h, nextTick } from 'vue'
 import { defineAbility } from '@casl/ability'
-import { abilitiesPlugin } from '../src'
-import Can from '../src/component/can'
+import { abilitiesPlugin, Can } from '../src'
 
 describe('`Can` component', () => {
-  const LocalVue = createLocalVue()
-  const ability = defineAbility((can) => {
-    can('read', 'Plugin')
-    can('update', 'Plugin', 'version')
-  })
-
-  beforeAll(() => {
-    LocalVue.use(abilitiesPlugin, ability)
-    LocalVue.component('Can', Can)
-  })
-
   it('renders all children if `Ability` instance allows to do an action', () => {
-    const wrapper = render(`
+    const { root } = render(`
       <Can I="read" a="Plugin">
         <h1></h1>
         <h2></h2>
       </Can>
     `)
 
-    expect(wrapper.contains('h1, h2')).to.be.true
+    expect(root.querySelectorAll('h1, h2')).to.have.length(2)
   })
 
   it('renders all children if `Ability` instance allows to do an action on field', () => {
-    const wrapper = render(`
-      <Can I="update" a="Plugin" field="title">
+    const { root } = render(`
+      <Can I="update" a="Plugin" field="version">
         <h1></h1>
       </Can>
     `)
 
-    expect(wrapper.contains('h1')).to.be.true
+    expect(root.querySelector('h1')).to.exist
   })
 
   it('inverts permission condition when `not` prop is passed', () => {
-    const wrapper = render(`
+    const { root } = render(`
       <Can not I="read" a="Plugin">
         <h1></h1>
       </Can>
     `)
 
-    expect(wrapper.contains('h1')).to.be.false
+    expect(root.querySelector('h1')).not.to.exist
   })
 
   it('does not render children if `Ability` instance disallows to do an action', () => {
-    const wrapper = render(`
+    const { root } = render(`
       <Can I="delete" a="Plugin">
         <h1></h1>
       </Can>
     `)
 
-    expect(wrapper.contains('h1')).to.be.false
+    expect(root.querySelector('h1')).not.to.exist
+  })
+
+  it('re-renders when `Ability` instance changes', async () => {
+    const ability = createAppAbility()
+    const { root } = render(`
+      <Can I="read" a="Plugin">
+        <h1></h1>
+      </Can>
+    `, ability)
+
+    ability.update([])
+    await nextTick()
+
+    expect(root.querySelector('h1')).not.to.exist
   })
 
   describe('`passThrough` property', () => {
+    const ability = createAppAbility()
     let scopedSlot
 
     beforeEach(() => {
-      scopedSlot = spy()
-      render(h => h('div', [
+      scopedSlot = spy(() => 'scoped default slot')
+      render(() => h('div', [
         h(Can, {
-          props: { I: 'delete', a: 'Plugin', passThrough: true },
-          scopedSlots: { default: scopedSlot }
+          I: 'delete',
+          a: 'Plugin',
+          passThrough: true,
+        }, {
+          default: scopedSlot
         })
-      ]))
+      ]), ability)
     })
 
-    it('allows to always render scoped slot', () => {
+    it('always renders passed in slot', () => {
       expect(scopedSlot).to.have.been.called()
     })
 
@@ -79,42 +85,50 @@ describe('`Can` component', () => {
   })
 
   describe('props validation', () => {
-    beforeAll(() => {
-      spy.on(console, 'error', () => {})
-    })
-
-    afterAll(() => {
-      spy.restore(console, 'error')
-    })
-
     it('throws error if action (i.e., `I` or `do`) is not specified', () => {
       expect(() => render(`
         <Can a="Plugin">
           <h1></h1>
         </Can>
-      `)).to.throw(/`I` nor `do` prop was passed/)
+      `)).to.throw(/`I` nor `do` prop was passed/i)
     })
 
-    it('throws error if `passThrough` is passed without scoped slot', () => {
+    it('throws error if created without default slot', () => {
       expect(() => render(`
-        <Can I="read" a="Post" passThrough>
-          <h1></h1>
-        </Can>
-      `)).to.throw(/`passThrough` expects default scoped slot/)
+        <Can I="read" a="Post" />
+      `)).to.throw(/expects to receive default slot/i)
     })
   })
 
-  function render(template) {
-    const defs = {}
+  function render(template, appAbility = null) {
+    const App = {
+      name: 'App',
+      data: () => ({
+        action: 'read',
+        subject: 'Plugin'
+      })
+    }
 
     if (typeof template === 'function') {
-      defs.render = template
+      App.render = template
     } else {
-      defs.template = `<div>${template.trim()}</div>`
+      App.template = template.trim()
     }
 
-    return mount(defs, {
-      localVue: LocalVue
+    const root = window.document.createElement('div')
+    const app = createApp(App)
+      .use(abilitiesPlugin, appAbility || createAppAbility())
+      .component(Can.name, Can)
+    app.config.warnHandler = () => {}
+    const vm = app.mount(root)
+
+    return { root, vm }
+  }
+
+  function createAppAbility() {
+    return defineAbility((can) => {
+      can('read', 'Plugin')
+      can('update', 'Plugin', 'version')
     })
   }
 })
diff --git a/packages/casl-vue/spec/plugin.spec.js b/packages/casl-vue/spec/plugin.spec.js
index b8240167f..180c3cf16 100644
--- a/packages/casl-vue/spec/plugin.spec.js
+++ b/packages/casl-vue/spec/plugin.spec.js
@@ -1,110 +1,66 @@
-import { createLocalVue } from '@vue/test-utils'
+import { createApp, defineComponent, nextTick } from 'vue'
 import { defineAbility } from '@casl/ability'
-import { abilitiesPlugin } from '../src'
+import { abilitiesPlugin, ABILITY_TOKEN, Can } from '../src'
 
 describe('Abilities plugin', () => {
   let ability
-  let Component
-  let Vue
   let vm
+  let app
+  let appRoot
 
   beforeEach(() => {
-    Vue = createLocalVue()
-    Component = Vue.extend({
-      props: {
-        post: { default: () => new Post() }
+    ability = defineAbility(can => can('read', 'Post'))
+    appRoot = window.document.createElement('div')
+  })
+
+  it('does not define global `$ability` and `$can` if `useGlobalProperties` is falsy', () => {
+    app = createApp()
+      .use(abilitiesPlugin, ability)
+
+    expect(app.config.globalProperties).not.to.have.keys('$ability', '$can')
+  })
+
+  describe('when ability is provided by plugin', () => {
+    const App = defineComponent({
+      inject: {
+        ability: { from: ABILITY_TOKEN }
       },
-      render(h) {
-        return h('div', this.$can('read', this.post) ? 'Yes' : 'No')
+      render() {
+        return this.ability.can('read', 'Post') ? 'Yes' : 'No'
       }
     })
-  })
 
-  describe('when ability is provided', () => {
     beforeEach(() => {
-      ability = defineAbility(can => can('read', 'Post'))
-      Vue.use(abilitiesPlugin, ability)
-      vm = new Component()
+      app = createApp(App)
+        .use(abilitiesPlugin, ability, {
+          useGlobalProperties: true
+        })
+      vm = app.mount(appRoot)
     })
 
-    it('defines `$can` for each component', () => {
+    it('defines `$can` for all components', () => {
       expect(vm.$can).to.be.a('function')
     })
 
     it('defines `$ability` instance for all components', () => {
       expect(vm.$ability).to.equal(ability)
     })
-  })
-
-  describe('when ability is provided as option of a component', () => {
-    beforeEach(() => {
-      ability = defineAbility(can => can('read', 'Post'))
-      Vue.use(abilitiesPlugin)
-    })
 
-    it('uses that ability', () => {
-      vm = new Component({ ability })
-      spy.on(ability, 'can')
-      vm.$can('read', 'Post')
-
-      expect(vm.$ability).to.equal(ability)
-      expect(ability.can).to.have.been.called.with.exactly('read', 'Post')
+    it('provides Ability instance', () => {
+      expect(vm.ability).to.equal(ability)
     })
 
-    it('passes ability down through the components tree', () => {
-      vm = new Vue({
-        ability,
-        render: h => h(Component)
-      }).$mount()
+    it('provides reactive `Ability` instance', async () => {
+      expect(appRoot.innerHTML).to.equal('Yes')
 
-      expect(vm.$children[0].$ability).to.equal(ability)
-    })
-  })
-
-  describe('when ability is not provided', () => {
-    beforeEach(() => {
-      Vue.use(abilitiesPlugin)
-      vm = new Component()
-    })
-
-    it('throws exception', () => {
-      expect(() => vm.$ability).to.throw(Error)
-    })
-  })
-
-  describe('`$can`', () => {
-    beforeEach(() => {
-      ability = defineAbility(can => can('read', 'Post'))
-      Vue.use(abilitiesPlugin, ability)
-      vm = new Component().$mount()
-    })
-
-    it('calls `can` method of underlying ability instance', () => {
-      spy.on(ability, 'can')
-      vm.$can('read', vm.post)
-
-      expect(ability.can).to.have.been.called.with.exactly('read', vm.post)
+      ability.update([])
+      await nextTick()
 
-      spy.restore(ability, 'can')
+      expect(appRoot.innerHTML).to.equal('No')
     })
 
-    it('can be used inside component template', () => {
-      expect(vm.$el.textContent).to.equal('Yes')
-    })
-
-    it('updates components when ability is updated', (done) => {
-      ability.update([])
-
-      vm.$nextTick(() => {
-        expect(vm.$el.textContent).to.equal('No')
-        done()
-      })
+    it('does not provide `Can` component', () => {
+      expect(app.component(Can.name)).not.to.exist
     })
   })
-
-  class Post {
-    constructor(attrs) {
-      Object.assign(this, attrs)
-    }
-  }
 })
diff --git a/packages/casl-vue/src/component/can.ts b/packages/casl-vue/src/component/can.ts
index 7e13c81f0..d7a79186a 100644
--- a/packages/casl-vue/src/component/can.ts
+++ b/packages/casl-vue/src/component/can.ts
@@ -1,6 +1,14 @@
-import Vue, { VNode } from 'vue';
-import { SubjectType, Generics, AnyAbility, Abilities, IfString, AbilityTuple } from '@casl/ability';
-import { VueAbility } from '../types';
+import { defineComponent, ComponentCustomProperties } from 'vue';
+import {
+  SubjectType,
+  Generics,
+  AnyAbility,
+  Ability,
+  Abilities,
+  IfString,
+  AbilityTuple,
+} from '@casl/ability';
+import { useAbility } from '../useAbility';
 
 type AbilityCanProps<
   T extends Abilities,
@@ -12,14 +20,33 @@ type AbilityCanProps<
   { I: T[0], this: Exclude<T[1], SubjectType>, field?: string }
   : Else;
 
-export type AllCanProps<T extends AnyAbility> = AbilityCanProps<Generics<T>['abilities']> & {
+export type CanProps<T extends AnyAbility> = AbilityCanProps<Generics<T>['abilities']> & {
   not?: boolean,
   passThrough?: boolean
 };
 
-export default Vue.extend<AllCanProps<VueAbility>>({
+type VueAbility = ComponentCustomProperties extends { $ability: AnyAbility }
+  ? ComponentCustomProperties['$ability']
+  : Ability;
+
+function detectSubjectProp(props: Record<string, unknown>) {
+  if ('a' in props) {
+    return 'a';
+  }
+
+  if ('this' in props) {
+    return 'this';
+  }
+
+  if ('an' in props) {
+    return 'an';
+  }
+
+  return '';
+}
+
+export const Can = defineComponent<CanProps<VueAbility>>({
   name: 'Can',
-  functional: true,
   props: {
     I: String,
     do: String,
@@ -30,30 +57,39 @@ export default Vue.extend<AllCanProps<VueAbility>>({
     not: Boolean,
     passThrough: Boolean,
     field: String
-  },
-  render(h, { props, children, parent, data }): VNode | VNode[] {
-    const mixed = props as any;
-    const [action, field] = (mixed.I || mixed.do || '').split(' ');
-    const subject = mixed.of || mixed.an || mixed.a || mixed.this || mixed.on;
-
-    if (!action) {
-      throw new Error('[Vue Can]: neither `I` nor `do` prop was passed in <Can>');
-    }
+  } as any,
+  setup(props, { slots }) {
+    const $props = props as Record<string, any>;
+    let actionProp = 'do';
+    let subjectProp = 'on';
 
-    const isAllowed = parent.$can(action, subject, field);
-    const canRender = props.not ? !isAllowed : isAllowed;
+    if (!(actionProp in props)) {
+      actionProp = 'I';
+      subjectProp = detectSubjectProp(props);
+    }
 
-    if (!props.passThrough) {
-      return canRender ? children : [];
+    if (!$props[actionProp]) {
+      throw new Error('Neither `I` nor `do` prop was passed in <Can>');
     }
 
-    if (!data.scopedSlots || !data.scopedSlots.default) {
-      throw new Error('[Vue Can]: `passThrough` expects default scoped slot to be specified');
+    if (!slots.default) {
+      throw new Error('Expects to receive default slot');
     }
 
-    return data.scopedSlots.default({
-      allowed: canRender,
-      ability: parent.$ability,
-    }) as VNode;
+    const ability = useAbility<VueAbility>();
+
+    return () => {
+      const isAllowed = ability.can($props[actionProp], $props[subjectProp], $props.field);
+      const canRender = props.not ? !isAllowed : isAllowed;
+
+      if (!props.passThrough) {
+        return canRender ? slots.default!() : null;
+      }
+
+      return slots.default!({
+        allowed: canRender,
+        ability,
+      });
+    };
   }
 });
diff --git a/packages/casl-vue/src/index.ts b/packages/casl-vue/src/index.ts
index 946cc7185..97c24375b 100644
--- a/packages/casl-vue/src/index.ts
+++ b/packages/casl-vue/src/index.ts
@@ -1,2 +1,5 @@
-export { default as Can } from './component/can';
-export * from './plugin';
+export { Can } from './component/can';
+export type { CanProps } from './component/can';
+export { abilitiesPlugin } from './plugin';
+export type { AbilityPluginOptions } from './plugin';
+export { useAbility, provideAbility, ABILITY_TOKEN } from './useAbility';
diff --git a/packages/casl-vue/src/plugin.ts b/packages/casl-vue/src/plugin.ts
index ea5cf677e..9346dca5c 100644
--- a/packages/casl-vue/src/plugin.ts
+++ b/packages/casl-vue/src/plugin.ts
@@ -1,58 +1,17 @@
-import { VueConstructor } from 'vue';
-import { VueAbility } from './types';
+import { App } from 'vue';
+import { AnyAbility } from '@casl/ability';
+import { ABILITY_TOKEN } from './useAbility';
+import { reactiveAbility } from './reactiveAbility';
 
-const WATCHERS = new WeakMap();
-
-function renderingDependencyFor(Vue: VueConstructor, ability: VueAbility) {
-  if (WATCHERS.has(ability)) {
-    return WATCHERS.get(ability);
-  }
-
-  const data = { _touch: true }; // eslint-disable-line no-underscore-dangle
-  const watcher = typeof Vue.observable === 'function'
-    ? Vue.observable(data)
-    : new Vue({ data });
-
-  ability.on('updated', () => {
-    // eslint-disable-next-line no-underscore-dangle
-    watcher._touch = !watcher._touch;
-  });
-  WATCHERS.set(ability, watcher);
-
-  return watcher;
-}
-
-function abilityDescriptor(ability?: VueAbility) {
-  if (ability) {
-    return { value: ability };
-  }
-
-  return {
-    get() {
-      throw new Error('Please provide `Ability` instance either in `abilitiesPlugin` or in ComponentOptions');
-    }
-  };
+export interface AbilityPluginOptions {
+  useGlobalProperties?: boolean
 }
 
-export function abilitiesPlugin(Vue: VueConstructor, defaultAbility?: VueAbility) {
-  Object.defineProperty(Vue.prototype, '$ability', abilityDescriptor(defaultAbility));
+export function abilitiesPlugin(app: App, ability: AnyAbility, options?: AbilityPluginOptions) {
+  app.provide(ABILITY_TOKEN, reactiveAbility(ability));
 
-  Vue.mixin({
-    beforeCreate() {
-      const { ability, parent } = this.$options;
-      const localAbility = ability || (parent ? parent.$ability : null);
-
-      if (localAbility) {
-        Object.defineProperty(this, '$ability', { value: localAbility });
-      }
-    },
-
-    methods: {
-      $can(...args: any): boolean {
-        const dep = renderingDependencyFor(Vue, this.$ability);
-        dep._touch = dep._touch; // eslint-disable-line
-        return this.$ability.can(...args);
-      }
-    }
-  });
+  if (options && options.useGlobalProperties) {
+    app.config.globalProperties.$ability = ability;
+    app.config.globalProperties.$can = ability.can;
+  }
 }
diff --git a/packages/casl-vue/src/reactiveAbility.ts b/packages/casl-vue/src/reactiveAbility.ts
new file mode 100644
index 000000000..4b86e800b
--- /dev/null
+++ b/packages/casl-vue/src/reactiveAbility.ts
@@ -0,0 +1,41 @@
+import { AnyAbility, Subject } from '@casl/ability';
+import { ref, Ref } from 'vue';
+
+const WATCHERS = new WeakMap<AnyAbility, Ref<boolean>>();
+
+function getOrRegisterWatcherFor(ability: AnyAbility) {
+  if (WATCHERS.has(ability)) {
+    return WATCHERS.get(ability)!;
+  }
+
+  const watcher = ref(true);
+  WATCHERS.set(ability, watcher);
+  ability.on('updated', () => {
+    watcher.value = !watcher.value;
+  });
+
+  return watcher;
+}
+
+function touch(ability: AnyAbility) {
+  const dep = getOrRegisterWatcherFor(ability);
+  dep.value = dep.value; // eslint-disable-line
+}
+
+function reactiveMethod(ability: AnyAbility, method: 'can' | 'cannot') {
+  if (ability.hasOwnProperty(method)) {
+    return;
+  }
+
+  const can = ability[method].bind(ability);
+  ability[method] = (action: string, subject: Subject, field?: string) => {
+    touch(ability);
+    return can(action, subject, field);
+  };
+}
+
+export function reactiveAbility(ability: AnyAbility) {
+  reactiveMethod(ability, 'can');
+  reactiveMethod(ability, 'cannot');
+  return ability;
+}
diff --git a/packages/casl-vue/src/types.ts b/packages/casl-vue/src/types.ts
deleted file mode 100644
index deded684c..000000000
--- a/packages/casl-vue/src/types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import Vue from 'vue';
-import '@casl/vue/patch'; // eslint-disable-line import/no-unresolved
-
-export type VueAbility = Vue['$ability'];
diff --git a/packages/casl-vue/src/useAbility.ts b/packages/casl-vue/src/useAbility.ts
new file mode 100644
index 000000000..e40f975bd
--- /dev/null
+++ b/packages/casl-vue/src/useAbility.ts
@@ -0,0 +1,19 @@
+import { inject, InjectionKey, provide } from 'vue';
+import type { AnyAbility, Ability } from '@casl/ability';
+import { reactiveAbility } from './reactiveAbility';
+
+export const ABILITY_TOKEN: InjectionKey<Ability> = Symbol('ability');
+
+export function useAbility<T extends AnyAbility = Ability>(): T {
+  const ability = inject<T>(ABILITY_TOKEN);
+
+  if (!ability) {
+    throw new Error('Cannot inject ability because it was not provided');
+  }
+
+  return ability;
+}
+
+export function provideAbility(ability: AnyAbility) {
+  provide(ABILITY_TOKEN, reactiveAbility(ability));
+}
diff --git a/packages/casl-vue/tsconfig.json b/packages/casl-vue/tsconfig.json
index 0e85ec482..0f9336593 100644
--- a/packages/casl-vue/tsconfig.json
+++ b/packages/casl-vue/tsconfig.json
@@ -5,10 +5,6 @@
     "spec/*"
   ],
   "compilerOptions": {
-    "outDir": "dist/types",
-    "baseUrl": ".",
-    "paths": {
-      "@casl/vue/patch": ["./patch.d.ts"]
-    }
+    "outDir": "dist/types"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9d18cf0a8..0fd5204d5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -363,7 +363,6 @@ importers:
       '@semantic-release/changelog': 5.0.1_semantic-release@17.3.2
       '@semantic-release/git': 9.0.0_semantic-release@17.3.2
       '@typescript-eslint/eslint-plugin': 4.13.0_eslint@7.10.0+typescript@4.0.5
-      '@vue/test-utils': 1.1.0_ae554d8947d7e926b014dda25865f517
       chai: 4.2.0
       chai-spies: 1.0.0_chai@4.2.0
       eslint: 7.10.0
@@ -377,7 +376,7 @@ importers:
       semantic-release: 17.3.2
       ts-jest: 26.4.4_jest@26.4.2+typescript@4.0.5
       typescript: 4.0.5
-      vue: 2.6.12
+      vue: 3.0.5
       vue-template-compiler: 2.6.12
     specifiers:
       '@babel/core': ^7.8.4
@@ -391,7 +390,6 @@ importers:
       '@semantic-release/changelog': ^5.0.1
       '@semantic-release/git': ^9.0.0
       '@typescript-eslint/eslint-plugin': 4.13.0
-      '@vue/test-utils': ^1.0.0-beta.25
       chai: ^4.1.0
       chai-spies: ^1.0.0
       eslint: ^7.1.0
@@ -405,7 +403,7 @@ importers:
       semantic-release: 17.3.2
       ts-jest: ^26.4.4
       typescript: ~4.0.0
-      vue: ^2.5.13
+      vue: ^3.0.5
       vue-template-compiler: ^2.5.13
 lockfileVersion: 5.2
 packages:
@@ -752,6 +750,13 @@ packages:
     hasBin: true
     resolution:
       integrity: sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q==
+  /@babel/parser/7.12.11:
+    dev: true
+    engines:
+      node: '>=6.0.0'
+    hasBin: true
+    resolution:
+      integrity: sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg==
   /@babel/plugin-proposal-async-generator-functions/7.10.5_@babel+core@7.11.6:
     dependencies:
       '@babel/core': 7.11.6
@@ -1479,6 +1484,14 @@ packages:
     dev: true
     resolution:
       integrity: sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q==
+  /@babel/types/7.12.12:
+    dependencies:
+      '@babel/helper-validator-identifier': 7.12.11
+      lodash: 4.17.20
+      to-fast-properties: 2.0.0
+    dev: true
+    resolution:
+      integrity: sha512-lnIX7piTxOH22xE7fDXDbSHg9MM1/6ORnafpJmov5rs0kX5g4BZxeXNJLXsMRiO0U5Rb8/FvMS6xlTnTHvxonQ==
   /@bcoe/v8-coverage/0.2.3:
     dev: true
     resolution:
@@ -2394,19 +2407,48 @@ packages:
     dev: false
     resolution:
       integrity: sha512-xJ6bAy8NQSzSKs1eusRvAejTp4qIQ0/gC1LsUzAw+LMWEaNsRYGnhsTPT4M8aMcAzpSNwb2vIRnxiuG/er8QCA==
-  /@vue/test-utils/1.1.0_ae554d8947d7e926b014dda25865f517:
+  /@vue/compiler-core/3.0.5:
     dependencies:
-      dom-event-types: 1.0.0
-      lodash: 4.17.20
-      pretty: 2.0.0
-      vue: 2.6.12
-      vue-template-compiler: 2.6.12
+      '@babel/parser': 7.12.11
+      '@babel/types': 7.12.12
+      '@vue/shared': 3.0.5
+      estree-walker: 2.0.2
+      source-map: 0.6.1
+    dev: true
+    resolution:
+      integrity: sha512-iFXwk2gmU/GGwN4hpBwDWWMLvpkIejf/AybcFtlQ5V1ur+5jwfBaV0Y1RXoR6ePfBPJixtKZ3PmN+M+HgMAtfQ==
+  /@vue/compiler-dom/3.0.5:
+    dependencies:
+      '@vue/compiler-core': 3.0.5
+      '@vue/shared': 3.0.5
     dev: true
-    peerDependencies:
-      vue: 2.x
-      vue-template-compiler: ^2.x
     resolution:
-      integrity: sha512-M+3jtVqNYIrvzO5gaxogre5a5+96h0hN/dXw+5Lj0t+dp6fAhYcUjpLrC9j9cEEkl2Rcuh/gKYRUmR5N4vcqPw==
+      integrity: sha512-HSOSe2XSPuCkp20h4+HXSiPH9qkhz6YbW9z9ZtL5vef2T2PMugH7/osIFVSrRZP/Ul5twFZ7MIRlp8tPX6e4/g==
+  /@vue/reactivity/3.0.5:
+    dependencies:
+      '@vue/shared': 3.0.5
+    dev: true
+    resolution:
+      integrity: sha512-3xodUE3sEIJgS7ntwUbopIpzzvi7vDAOjVamfb2l+v1FUg0jpd3gf62N2wggJw3fxBMr+QvyxpD+dBoxLsmAjw==
+  /@vue/runtime-core/3.0.5:
+    dependencies:
+      '@vue/reactivity': 3.0.5
+      '@vue/shared': 3.0.5
+    dev: true
+    resolution:
+      integrity: sha512-Cnyi2NqREwOLcTEsIi1DQX1hHtkVj4eGm4hBG7HhokS05DqpK4/80jG6PCCnCH9rIJDB2FqtaODX397210plXg==
+  /@vue/runtime-dom/3.0.5:
+    dependencies:
+      '@vue/runtime-core': 3.0.5
+      '@vue/shared': 3.0.5
+      csstype: 2.6.14
+    dev: true
+    resolution:
+      integrity: sha512-iilX1KySeIzHHtErT6Y44db1rhWK5tAI0CiJIPr+SJoZ2jbjoOSE6ff/jfIQakchbm1d6jq6VtRVnp5xYdOXKA==
+  /@vue/shared/3.0.5:
+    dev: true
+    resolution:
+      integrity: sha512-gYsNoGkWejBxNO6SNRjOh/xKeZ0H0V+TFzaPzODfBjkAIb0aQgBuixC1brandC/CDJy1wYPwSoYrXpvul7m6yw==
   /JSONStream/1.3.5:
     dependencies:
       jsonparse: 1.3.1
@@ -2419,10 +2461,6 @@ packages:
     dev: true
     resolution:
       integrity: sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==
-  /abbrev/1.1.1:
-    dev: true
-    resolution:
-      integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==
   /acorn-globals/6.0.0:
     dependencies:
       acorn: 7.4.0
@@ -3389,23 +3427,6 @@ packages:
     dev: true
     resolution:
       integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
-  /condense-newlines/0.2.1:
-    dependencies:
-      extend-shallow: 2.0.1
-      is-whitespace: 0.3.0
-      kind-of: 3.2.2
-    dev: true
-    engines:
-      node: '>=0.10.0'
-    resolution:
-      integrity: sha1-PemFVTE5R10yUCyDsC9gaE0kxV8=
-  /config-chain/1.1.12:
-    dependencies:
-      ini: 1.3.5
-      proto-list: 1.2.4
-    dev: true
-    resolution:
-      integrity: sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==
   /confusing-browser-globals/1.0.9:
     dev: true
     resolution:
@@ -3558,6 +3579,10 @@ packages:
       node: '>=8'
     resolution:
       integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==
+  /csstype/2.6.14:
+    dev: true
+    resolution:
+      integrity: sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A==
   /csstype/3.0.6:
     dev: true
     resolution:
@@ -3793,10 +3818,6 @@ packages:
       node: '>=6.0.0'
     resolution:
       integrity: sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
-  /dom-event-types/1.0.0:
-    dev: true
-    resolution:
-      integrity: sha512-2G2Vwi2zXTHBGqXHsJ4+ak/iP0N8Ar+G8a7LiD2oup5o4sQWytwqqrZu/O6hIMV0KMID2PL69OhpshLO0n7UJQ==
   /domexception/2.0.1:
     dependencies:
       webidl-conversions: 5.0.0
@@ -3826,16 +3847,6 @@ packages:
     dev: true
     resolution:
       integrity: sha1-OoOpBOVDUyh4dMVkt1SThoSamMk=
-  /editorconfig/0.15.3:
-    dependencies:
-      commander: 2.20.3
-      lru-cache: 4.1.5
-      semver: 5.7.1
-      sigmund: 1.0.1
-    dev: true
-    hasBin: true
-    resolution:
-      integrity: sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==
   /electron-to-chromium/1.3.576:
     dev: true
     resolution:
@@ -4158,6 +4169,10 @@ packages:
     dev: true
     resolution:
       integrity: sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==
+  /estree-walker/2.0.2:
+    dev: true
+    resolution:
+      integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
   /esutils/2.0.3:
     dev: true
     engines:
@@ -4938,10 +4953,6 @@ packages:
     dev: true
     resolution:
       integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
-  /ini/1.3.5:
-    dev: true
-    resolution:
-      integrity: sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
   /ini/1.3.8:
     dev: true
     resolution:
@@ -5238,12 +5249,6 @@ packages:
     dev: true
     resolution:
       integrity: sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
-  /is-whitespace/0.3.0:
-    dev: true
-    engines:
-      node: '>=0.10.0'
-    resolution:
-      integrity: sha1-Fjnssb4DauxppUy7QBz77XEUq38=
   /is-windows/1.0.2:
     dev: true
     engines:
@@ -5781,17 +5786,6 @@ packages:
     hasBin: true
     resolution:
       integrity: sha512-LLCjPrUh98Ik8CzW8LLVnSCfLaiY+wbK53U7VxnFSX7Q+kWC4noVeDvGWIFw0Amfq1lq2VfGm7YHWSLBV62MJw==
-  /js-beautify/1.13.0:
-    dependencies:
-      config-chain: 1.1.12
-      editorconfig: 0.15.3
-      glob: 7.1.6
-      mkdirp: 1.0.4
-      nopt: 5.0.0
-    dev: true
-    hasBin: true
-    resolution:
-      integrity: sha512-/Tbp1OVzZjbwzwJQFIlYLm9eWQ+3aYbBXLSaqb1mEJzhcQAfrqMMQYtjb6io+U6KpD0ID4F+Id3/xcjH3l/sqA==
   /js-tokens/4.0.0:
     dev: true
     resolution:
@@ -6155,13 +6149,6 @@ packages:
     hasBin: true
     resolution:
       integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
-  /lru-cache/4.1.5:
-    dependencies:
-      pseudomap: 1.0.2
-      yallist: 2.1.2
-    dev: true
-    resolution:
-      integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
   /lru-cache/6.0.0:
     dependencies:
       yallist: 4.0.0
@@ -6523,15 +6510,6 @@ packages:
     dev: true
     resolution:
       integrity: sha512-DD5vebQLg8jLCOzwupn954fbIiZht05DAZs0k2u8NStSe6h9XdsuIQL8hSRKYiU8WUQRznmSDrKGbv3ObOmC7g==
-  /nopt/5.0.0:
-    dependencies:
-      abbrev: 1.1.1
-    dev: true
-    engines:
-      node: '>=6'
-    hasBin: true
-    resolution:
-      integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==
   /normalize-package-data/2.5.0:
     dependencies:
       hosted-git-info: 2.8.8
@@ -7150,16 +7128,6 @@ packages:
       node: '>= 10'
     resolution:
       integrity: sha512-7AeGuCYNGmycyQbCqd/3PWH4eOoX/OiCa0uphp57NVTeAGdJGaAliecxwBDHYQCIvrW7aDBZCYeNTP/WX69mkg==
-  /pretty/2.0.0:
-    dependencies:
-      condense-newlines: 0.2.1
-      extend-shallow: 2.0.1
-      js-beautify: 1.13.0
-    dev: true
-    engines:
-      node: '>=0.10.0'
-    resolution:
-      integrity: sha1-rbx5YLe7/iiaVX3F9zdhmiINBqU=
   /process-nextick-args/2.0.1:
     dev: true
     resolution:
@@ -7179,14 +7147,6 @@ packages:
       node: '>= 6'
     resolution:
       integrity: sha512-Q06uKs2CkNYVID0VqwfAl9mipo99zkBv/n2JtWY89Yxa3ZabWSrs0e2KTudKVa3peLUvYXMefDqIleLPVUBZMA==
-  /proto-list/1.2.4:
-    dev: true
-    resolution:
-      integrity: sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=
-  /pseudomap/1.0.2:
-    dev: true
-    resolution:
-      integrity: sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
   /psl/1.8.0:
     dev: true
     resolution:
@@ -7886,10 +7846,6 @@ packages:
     dev: true
     resolution:
       integrity: sha512-oqD7PMJ+uO6jV9EQCl0LrRw1OwsiPsiFQR5AR30heR+4Dl7jBBbDLnNvWiak20tzZlSE1H7RB30SX/1j/YYT7g==
-  /sigmund/1.0.1:
-    dev: true
-    resolution:
-      integrity: sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=
   /signal-exit/3.0.3:
     dev: true
     resolution:
@@ -8817,10 +8773,14 @@ packages:
     dev: true
     resolution:
       integrity: sha512-OzzZ52zS41YUbkCBfdXShQTe69j1gQDZ9HIX8miuC9C3rBCk9wIRjLiZZLrmX9V+Ftq/YEyv1JaVr5Y/hNtByg==
-  /vue/2.6.12:
+  /vue/3.0.5:
+    dependencies:
+      '@vue/compiler-dom': 3.0.5
+      '@vue/runtime-dom': 3.0.5
+      '@vue/shared': 3.0.5
     dev: true
     resolution:
-      integrity: sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==
+      integrity: sha512-TfaprOmtsAfhQau7WsomXZ8d9op/dkQLNIq8qPV3A0Vxs6GR5E+c1rfJS1SDkXRQj+dFyfnec7+U0Be1huiScg==
   /w3c-hr-time/1.0.2:
     dependencies:
       browser-process-hrtime: 1.0.0
@@ -8986,10 +8946,6 @@ packages:
       node: '>=10'
     resolution:
       integrity: sha512-hsRUr4FFrvhhRH12wOdfs38Gy7k2FFzB9qgN9v3aLykRq0dRcdcpz5C9FxdS2NuhOrI/628b/KSTJ3rwHysYSg==
-  /yallist/2.1.2:
-    dev: true
-    resolution:
-      integrity: sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=
   /yallist/4.0.0:
     dev: true
     resolution: