Vue3 Typescript Composition API - Breaks with defineComponent Usage

[MarkoH17]

Describe the bug Using vue-filepond doesn't work within Typescript components that export it using defineComponent.

Logs Not applicable. See the Stacktraces section below.

To Reproduce tl;dr: Refer to the gist with the two modifications below.

Reproduce the issue using the example component in the repository:

1. Modify the script tag to include lang="ts".
2. Modify the default export from export default { name:...}; to export default defineComponent({ name: ...});.
3. Observe the error for the component registration that indicates an issue with types. (Sidenote: I'm very new to VueJS and Typescript, so I don't know how to better debug this issue). See the screenshot below illustrating the error:

Expected behavior The vue-filepond component works great with export default { name: ... }; and export default defineComponent({ name: ...});. However, once the language of the component's script is changed to TypeScript lang="ts", vue-filepond is unusable. Vue-Filepond should support Vue3 + TypeScript.

Stacktraces

Error on line 74 for component registration

``` No overload matches this call. The last overload gave the following error. Type 'ComponentOptions, ... 5 more ..., any>' is not assignable to type 'Component | WritableComputedOptions>, MethodOptions>'. Type 'ComponentOptions, ... 5 more ..., any>' is not assignable to type 'FunctionalComponent'. Type 'ComponentOptionsBase, ... 7 more ..., {}> & ThisType<...>' provides no match for the signature '(props: any, ctx: Pick, "attrs" | "slots" | "emit">): any'. ```

Information about your project:

• Application package versions: Vue 3.1.4, TypeScript: 4.1.5

• Your operating system: macOS 11.5

• FilePond versions: FilePond 4.28.2 and Vue-FilePond 7.0.0

[MarkoH17]

Just to follow up on this - it appears that setting lang="ts" on the main script tag of the example component triggers the same issue on the component:

[MarkoH17]

Closing this issue, as I was able to solve the issue. I modified the declaration of FilePond to include the type (VueFilePondComponent) - e.g:

const FilePond = vueFilePond(
  FilePondPluginFileValidateType,
  FilePondPluginImagePreview,
) as VueFilePondComponent;