Error is shown for property not found for properties that are a member of this single page component

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: Windows 10
• Vetur version: 0.27.0
• VS Code version: 1.48.2

Problem

Vetur throws an error when using Vue in a single page component with a computed property.

Property 'foo' does not exist on type 'CombinedVueInstance<CombinedVueInstance<Vue, unknown, unknown, unknown, Record<never, any>>, object, object, object, Record<never, any>>'.Vetur(2339)

There is no error message in the Vue Language Server.

Reproducible Case

Create a new component and add props and data. Then add a computed property.

Sample component:

<template>
  <div>
    {{ foo }}
    {{ name }}
  </div>
</template>

<script>
export default {
  name: "Test",
  props: ["foo", "bar"],
  data() {
    return {
      name: "Joe",
    };
  },
  computed: {
    upperName() {
      return this.name.toUpperCase();
    },
  },
};
</script>

Reference commit: https://github.com/firstclown/property-not-found-vetur-issue/commit/52ced82e2a1e31b4f5c2d3cbbc76518562e43de4

[rchl]

Try disabling the new setting: vetur.validation.interpolation.

At least if you don’t care about potential real issues being reported. Otherwise, annotate your JS code with JSDoc annotations where typescript can’t infer types automatically.

[rchl]

@rodrigoriome You can still make types work in this case by making typescript aware of types you are returning from asyncData by also declaring them in data. Something like:

async asyncData() {
  const foo = await axios.get(...)
  return {
    foo,
  }
},
data() {
  return {
    /** @type {string | null}
    foo: null
  }
}

So no, disabling automatically, in that case, wouldn’t be expected. I’m using Nuxt with type checking all the time.