Vue 3 + Typescript custom plugin does not exist on type 'ComponentPublicInstance

We are writing a custom plugin which we want to use in our Vue.JS 3 application.

We added the plugin the same way as the documentation suggests, and we created a .d.ts file in the src/ map of the project.

However, when we want to run the application,and want to call the plugin in App.vue we get the following error:

TS2339: Property '$casbin' does not exist on type 'ComponentPublicInstance<{}, { permissionsResult: Ref<any>; }, { menuItems: never[]; user: { name: string; imageHash: string; }; }, {}, { getMenuItems(): any; }, EmitsOptions, {}, {}, false, ComponentOptionsBase<...>>'.

Our plugin file:

import { Authorizer } from 'casbin.js';
import type { App } from 'vue';

export const authorizer = new Authorizer('manual');

export default {
  install(app: App): void {
    // eslint-disable-next-line no-param-reassign
    app.config.globalProperties.$casbin = authorizer;
  },
};

our shims-plugins.d.ts file:

import { ComponentCustomProperties } from 'vue';
import Store from './store';
import { authorizer } from './plugins/casbin';

declare module '@vue/runtime-core' {
  // eslint-disable-next-line no-shadow
  interface ComponentCustomProperties {
    $casbin: typeof authorizer;
    $store: typeof Store;
  }
}

tsconfig.json

  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}```


package.json

```{
  "name": "web",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@types/node": "^15.0.1",
    "@types/qrcode": "^1.4.0",
    "@vue/apollo-composable": "^4.0.0-alpha.12",
    "apollo-boost": "^0.4.9",
    "apollo-cache-inmemory": "^1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link-http": "^1.5.17",
    "axios": "^0.21.1",
    "casbin.js": "^0.3.2",
    "core-js": "^3.6.5",
    "graphql": "^15.5.0",
    "graphql-tag": "^2.11.0",
    "qrcode": "^1.4.4",
    "regenerator-runtime": "^0.13.7",
    "vue": "^3.0.0",
    "vue-apollo": "^3.0.7",
    "vue-authz": "^0.0.1",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@types/jest": "^24.0.19",
    "@typescript-eslint/eslint-plugin": "^4.22.0",
    "@typescript-eslint/parser": "^4.22.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-airbnb": "^5.0.2",
    "@vue/eslint-config-typescript": "^7.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-vue": "^7.0.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5",
    "vue-jest": "^5.0.0-0",
    "prettier": "^2.1.2",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-prettier": "^3.1.4"
  }
}