Vue js 3 - Property 'projects' does not exist on type 'CreateComponentPublicInstance<{}, {}, {}, {}, {},

Question

Issue:

Property 'projects' does not exist on type 'CreateComponentPublicInstance<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, {}, {}, false, OptionTypesType<{}, ... 4 more ..., {}>, ... 5 more ..., {}>'

For some reason it's screaming on computed, You can see my this.project or this.message.

I have no idea how to fix it, please help. package.json

 "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.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-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.6",
    "fork-ts-checker-webpack-plugin": "^6.2.10",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "sass-loader": "10.1.1",
    "terser-webpack-plugin": "^4.2.3",
    "prettier": "^2.2.1",
    "typescript": "~4.1.5"
  }

The issue is coming from when i add to shims-vue.d.ts:

import { ComponentCustomProperties } from 'vue'
import { Store } from 'vuex'

declare module '@vue/runtime-core' {
  // declare your own store states
  interface State {
    count: number
  }

  // provide typings for `this.$store`
  interface ComponentCustomProperties {
    $store: Store<State>
  }
}

Then it showing my error. If i remove the store declaration, it's screaming on the store but not on the computed.

Answer 1

I had a similar issue with Vetur errors on computed properties, and search brought this issue up.

According to this link, this is a known issue regarding Vue's Typings and Typescript.

https://vuejs.github.io/vetur/guide/FAQ.html#property-xxx-does-not-exist-on-type-combinedvueinstance

Changing computed properties to have an explicit return type seems to fix the problem.

greet (): string {
  return this.msg + ' world'
}

Some more details and examples:

https://vuejs.org/v2/guide/typescript.html#Annotating-Return-Types

Answer 2

I lost a lot of time with this error, in my case also related to the ''data'' attributes of vue. First I had some problem with node modules, after uninstalling global, local and reinstalling packages, I noticed that blank projects (created by vue-cli) now worked, only my main project kept reporting this error.

The problem with my project now was that only the components registered globally were not correctly recognized by either vetur or volar, so I kept getting this thread's error only on them.

I ended up discovering a solution by accident, I'll keep it until I find out what's really going on. Typescript only stops returning this error when I declare "data" like this:

data: () => { 

Other variations, like this one, don't work

    //data() { also not works
    data: function () {
        return {
            comida: 1,
        }
    },
    methods: {
        setupVisitsCategoryCard() {
            this.comida = 2 //Property 'comida' does not exist on type 'CreateComponentPublicInstance<...'
        }
    }
    ```