`vue-tsc` Computed properties & instance methods not recognized as already bound (@typescript-eslint/unbound-method false positive) #5629

heyakyra · 2025-09-08T08:52:17Z

heyakyra
Sep 8, 2025

I filed a ticket against eslint-plugin-vue and commented on a ticket here and on vue-eslint-parser, but starting a discussion because I don't really know where it belongs and nobody is likely to see the comment on a closed ticket.

What did you do?
Occurs when assigning to a variable or passing as a parameter to another function

  computed: {
    alwaysBound(): string {
      return "Always bound!";
    },
  },
  methods: {
    // Computed properties trigger the error
    getAlwaysBound(): string {
      const alwaysBound = this.alwaysBound; // <-- ERROR!
      return alwaysBound; 
    },
    // As do instance methods
    logAlwaysBound(): string {
      const alwaysBound = this.getAlwaysBound(); // <-- ERROR!
      console.log(this.getAlwaysBound());  // <-- ERROR!
    },

What did you expect to happen?
Vue instance methods and computed properties to be understood as already bound.

What actually happened?

Hitting this for all uses of computed properties and methods, which are all automatically bound by Vue already. eslint-config-typescript and vue-eslint-parser. Also, vue-tsc misunderstands computed properties as () -> ActualType instead of ActualType resulting in errors like Argument of type '() => ActualType' is not assignable to parameter of type 'ActualType'

error  Avoid referencing unbound methods which may cause unintentional scoping of `this`. 
If your function does not access `this`, you can annotate it with `this: void`, or consider using an arrow function instead  @typescript-eslint/unbound-method

eslint.config.js:

import {
  defineConfigWithVueTs,
  vueTsConfigs,
} from "@vue/eslint-config-typescript";
import { globalIgnores } from "eslint/config";
import prettierConfig from "@vue/eslint-config-prettier";
import standard from "@vue/eslint-config-standard-with-typescript";
import globals from "globals";
import tsParser from "@typescript-eslint/parser";
import vueParser from "vue-eslint-parser";
import js from "@eslint/js";
import pluginVue from "eslint-plugin-vue";
import storybook from "eslint-plugin-storybook";

export default defineConfigWithVueTs(
  globalIgnores([
    "node_modules",
    "dist/",
    "components/*/dist/",
    "**/index.d.ts",
  ]),
  js.configs.recommended,
  standard,
  storybook.configs["flat/recommended"],
  vueTsConfigs.recommendedTypeChecked,
  pluginVue.configs["flat/recommended"],
  prettierConfig,
  {
    name: "our-project/base",
    files: ["**/*.{js,jsx,ts,tsx,vue}"],
    languageOptions: {
      globals: {
        ...globals.node,
        ...globals.browser,
      },
      sourceType: "module",
      ecmaVersion: "latest",
      parser: vueParser,
      parserOptions: {
        parser: tsParser,
        projectService: true,
        sourceType: "module",
        tsconfigRootDir: import.meta.dirname,
      },
    },
    rules: {
      […]
    }
  }
);

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "resolveJsonModule": true,
    "verbatimModuleSyntax": true,
    "types": ["node", "vue", "vitest/globals"],
    "allowJs": true,
    "checkJs": true,
  },
  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/*.vue",
    "**/*.js",
  ],
  "extends": [
    "@vue/tsconfig/tsconfig.dom.json",
    "@vue/tsconfig/tsconfig.lib.json"
  ],
  "exclude": ["node_modules", "types", "dist"]
}

Answered by heyakyra

Sep 18, 2025

Sorry, haven't had time to figure out the minimum reproduction (our project is quite large), but I managed to find a couple of fixes/workarounds, one of which was intended for Vue 2 even though we are on the latest Vue 3 and vue-tsc. It's unclear which one(s) are the "actual" cause(s), but these helped:

Manually type `mapState`, `mapGetters`, etc.

For computed variables / component properties & methods issue, this worked well for some cases (for example in a component library where the final type for your Vuex or Pinia store can't be specified yet: https://stackoverflow.com/a/70983629/2836299

Use of deprecated `computed` cache invalidation

Trying to invalidate cache for computed variables as de…

View full answer

johnsoncodehk · 2025-09-08T13:16:59Z

johnsoncodehk
Sep 8, 2025
Maintainer

eslint-plugin-vue does not use the code parser from language-tools, so it cannot be resolved in this repo.

As an alternative, you can try tsslint, which has first-party Vue support based on language-tools code parser and is compatible with eslint rules.

3 replies

heyakyra Sep 8, 2025
Author

Thanks, might have to give that a try at some point, but need to get this working for now. I think this may be related to language-tools as I mentioned in this bit:

vue-tsc misunderstands computed properties as () -> ActualType instead of ActualType resulting in errors like Argument of type '() => ActualType' is not assignable to parameter of type 'ActualType'

KazariEX Sep 8, 2025
Collaborator

Please provide a minimal reproduction for the type issue. You can use https://play.vuejs.org.

heyakyra Sep 18, 2025
Author

Sorry, haven't had time to figure out the minimum reproduction (our project is quite large), but I managed to find a couple of fixes/workarounds, one of which was intended for Vue 2 even though we are on the latest Vue 3 and vue-tsc. It's unclear which one(s) are the "actual" cause(s), but these helped:

Manually type `mapState`, `mapGetters`, etc.

For computed variables / component properties & methods issue, this worked well for some cases (for example in a component library where the final type for your Vuex or Pinia store can't be specified yet: https://stackoverflow.com/a/70983629/2836299

Use of deprecated `computed` cache invalidation

Trying to invalidate cache for computed variables as described in the guide has been deprecated as of Vue2. It seems that this:

template: '<p>message: {{ timeMessage }}</p>',
computed: {
  timeMessage: {
    cache: false,
    get: function () {
      return Date.now() + this.message
    }
  }
}

results in the inferred type for the computed property being invalid, not only because of the no-longer-supported cache property, but also because explicitly defining get() implies that set() will also be provided.

Ensure circular dependencies are explicitly type annotated

import type MyDependentComponent from "./MyDependentComponent";
import { defineAsyncComponent, defineComponent } from "vue";

export default defineComponent({
  name: "MyComponent",
  components: {
    MyDependentComponent: defineAsyncComponent<typeof MyDependentComponent>( // <-- Important bit
      () => import("MyDependentComponent")
    ),
  },

Add an empty `script setup` tag

This worked for at least one component, but did break again and required the solutions above. While it reduced noise in my IDE, once other issues were fixed, this resulted in error TS7056: The inferred type of this node exceeds the maximum length the compiler will serialize. An explicit type annotation is needed.ts-plugin(7056)

@iraklisg opened on Jul 8, 2022:

As a workaround, using a normal <script> alongside <script setup> that defines a name property makes the error dissappear
<script setup lang="ts">
// SEE: https://github.com/vuejs/vue/issues/12637
</script>

<script lang="ts">
export default {
  name: 'HelloWorld.'
}
</script>

Answer selected by heyakyra

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Manually type `mapState`, `mapGetters`, etc.

Use of deprecated `computed` cache invalidation

Ensure circular dependencies are explicitly type annotated

Add an empty `script setup` tag

Uh oh!

Uh oh!

`vue-tsc` Computed properties & instance methods not recognized as already bound (@typescript-eslint/unbound-method false positive) #5629

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Manually type mapState, mapGetters, etc.

Use of deprecated computed cache invalidation

Ensure circular dependencies are explicitly type annotated

Add an empty script setup tag

Uh oh!

vue-tsc Computed properties & instance methods not recognized as already bound (@typescript-eslint/unbound-method false positive) #5629

Uh oh!

Uh oh!

heyakyra Sep 8, 2025

Manually type mapState, mapGetters, etc.

Use of deprecated computed cache invalidation

Replies: 1 comment · 3 replies

Uh oh!

johnsoncodehk Sep 8, 2025 Maintainer

Uh oh!

heyakyra Sep 8, 2025 Author

Uh oh!

KazariEX Sep 8, 2025 Collaborator

Uh oh!

Uh oh!

heyakyra Sep 18, 2025 Author

Manually type mapState, mapGetters, etc.

Use of deprecated computed cache invalidation

Ensure circular dependencies are explicitly type annotated

Add an empty script setup tag

Manually type `mapState`, `mapGetters`, etc.

Use of deprecated `computed` cache invalidation

Add an empty `script setup` tag

`vue-tsc` Computed properties & instance methods not recognized as already bound (@typescript-eslint/unbound-method false positive) #5629

heyakyra
Sep 8, 2025

Manually type `mapState`, `mapGetters`, etc.

Use of deprecated `computed` cache invalidation

Replies: 1 comment 3 replies

johnsoncodehk
Sep 8, 2025
Maintainer

heyakyra Sep 8, 2025
Author

KazariEX Sep 8, 2025
Collaborator

heyakyra Sep 18, 2025
Author

Manually type `mapState`, `mapGetters`, etc.

Use of deprecated `computed` cache invalidation

Add an empty `script setup` tag