I encountered a similar issue while trying to export a component. Certain VS Code snippets generate templates without the necessary types, as shown below:

export default {
  data() {
    return {
      x: "something",
    };
  },
  methods: {
    rename(name: string) {
      this.x = name;
    },
    
  },
};

The problem was that I forgot to include defineComponent() when exporting. The correct way is:

import { defineComponent } from "vue";

export default defineComponent({
  data() {
    return {
      x: "something",
    };
  },
  methods: {
    rename(name: string) {
      this.x = name;
    },
    
  },
});

Ensure that you export the component using the defineComponent() function.

Here's another answer that combines various solutions you might need to implement.

Remember to include the file extension as ".vue" when importing

Although both

import Competency from '../components/competency';

and

import Competency from '../components/competency.vue';

can successfully compile, using the second option can prevent errors in IDEs like VS Code.

Create a shim typings file

As mentioned earlier, you'll need a file that imports and re-exports the type of "Vue". It can be named vue-file-import.d.ts or vue-shim.d.ts. The content remains the same:

// vue-file-import.d.ts

declare module "*.vue" {
   import Vue from "vue";
   export default Vue;
}

Experiment with different locations for the shim file

I initially placed it in /src, which produced inconsistent results. Moving it to /typings provided more reliable success. While some prefer the /src location, others have found more stability in the /typings directory.

Encountering the same problem. The solution is to include a return type for each computed variable.

Below is the issue stemming from the code lacking a return type.

      computed: {
containerClass() {
    return this.isLastChild
  }

To resolve, specify a return type of String.

  computed: {
containerClass(): String {
    return this.isLastChild
  }

After seeking guidance from @sherwin water, I discovered a valuable insight. It became evident to me that the error stemmed from neglecting to specify a return type for the computed field I added. The remedy was straightforward: include the return type when defining the computed field.

// prior mistake
computed: {
  someThing() {
    const { a, b } = this;
    return a + b;
  }
}

// corrected version
computed: {
  someThing(): number {
    const { a, b } = this;
    return a + b;
  }
}

While exploring the contents of https://v2.vuejs.org/v2/guide/routing.html, I encountered similar TypeScript errors. To resolve this issue, I successfully resolved it by typecasting the Vue instance to 'any' as demonstrated below:

    new Vue({
        el: '#app',
        data: {
            currentRoute: window.location.pathname
        },
        computed: {
            ViewComponent() {
                return routes[(this as any).currentRoute] || routes['/']
            }
        },
        render (h) { return h((this as any).ViewComponent) }
    })

If you're working with TypeScript, I recommend using class-based components in Vue (check out "Writing Class-Based Components with Vue.js and TypeScript"). This approach ensures type-safe code and enables autocomplete features in your IDE.

Make sure to install vue-property-decorator

Below is an example of a class-based component:

import { Component, Vue, Watch } from 'vue-property-decorator'

@Component({
  props: {
    prop1: { type: Number }
  }
})
export default class MyComponent extends Vue {
  // Computed property definition
  get myComputedRoute() {
     return this.$route.params;
  }

  // Watcher setup
  @Watch('myComputedRoute')
  onPropertyChanged(value: string, oldValue: string) {
    // Add logic for watcher here
  }
}

For those working with typescript and vue2, it is recommended to utilize Vue.component or Vue.extend for defining components.

import Vue from 'vue'
const Component = Vue.extend({
  ...
})

Encountering similar issues, particularly within .vue files, led me to a potential solution. It appears that changing the traditional ES6 "import" statement to "require" may resolve the problem.

For example, instead of:

import Competency from '../components/competency.vue';

try...

declare var require: any;
var Competency = require("../components/competency.vue").default;

I encountered similar issues when using Vue 2.8.2 and Typescript 2.5.3. To resolve this, I stored my Vue instance in a variable and specified its type. By doing this, TypeScript is able to recognize all Vue properties when the instance is created using an options object.

var VueApp: any = Vue;

var App = new VueApp({
  el: "#app",
  data() {
     return {
        count: 0
     }
  },
  methods:{
    initialize() {
      this.count = count + 1; // This should now work as expected
    }
  }
})

Avoid the utilization of

Opt for employing Object.assign(vm, source); in its place

similar to

const source= {number: this.number }
Object.assign(this, source);

Encountered this issue while utilizing the VS Code editor.

I had Vetur plugin installed on my VS Code, which interprets Vue files as typescript files. To resolve this, I made adjustments to the settings.json file.

To address this problem, navigate to the settings.json file in the root directory of your project within the VS editor, and make the following modification: https://i.sstatic.net/jJv6C.png

"vetur.experimental.templateInterpolationService": false

Implementing this change resolved the issue for me.

The issue in VSCode was resolved for me when I closed the application and then reopened it.