Vue Volar in VSCode doesn't show full type errors

Question

I've been trying to develop an app in Vue with VSCode. For some reason, Volar refuses to show details of any type errors. It will only show that types are incompatible, but it will not drilldown into the properties to say why.

Difference between normal Typescript and Volar error messages

File content (same in .vue and .ts files):

interface Bar {
  field: string;
}
interface Foo {
  field: string | undefined;
}

function processBar(f: Bar) {
  return f;
}

const foo: Foo = { field: 'foo' };
processBar(foo);

Expected behavior (.ts file)

• Typechecking shows why Foo is unassignable to parameter of type Bar.

Argument of type 'Foo' is not assignable to parameter of type 'Bar'.
  Types of property 'field' are incompatible.
    Type 'string | undefined' is not assignable to type 'string'.
      Type 'undefined' is not assignable to type 'string'.

Actual behavior (.vue file)

• Typechecking only shows that the types are incompatible

Argument of type 'Foo' is not assignable to parameter of type 'Bar'.
  Types of property 'field' are incompatible.