VueJS 2 + TypeScript: computed value does not detect property defined by data

The following component:

<template lang="html">
  <div>
    <p>{{ bar }}</p>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export const FooBar = Vue.extend({
  computed: {
    bar: function() {
      return this.foo;
    }
  },
  data: function() {
    return {
      foo: 'bar',
    };
  },
});

export default FooBar;
</script>

Results in a type error:

13:19 Property 'foo' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, unknown, Readonly<Record<never, any>>>'.
    11 |   computed: {
    12 |     bar: function() {
  > 13 |       return this.foo;
       |                   ^
    14 |     }
    15 |   },
    16 |   data: function() {
Version: typescript 4.1.6

These kinds of errors do not occur when using class-style component syntax, but I would prefer not to use such syntax. Is there a recommended approach for defining types on VueJS components?

Complete/minimal repository reproduction here: https://github.com/davidRoussov/vue-typescript-error

Answer

As mentioned in the Typescript Support section of the Vue documentation:

In your case, you should change bar: function() { to bar: function(): string {

You might come across the same error if you have a render() method that returns a value, without a : VNode annotation.