'Vue3 Typescript error on registering component inside another

I have a Vue3 component (using TS) in which I'm trying to render another component inside it like this:

TopBar.vue

<template> <TopBarProfileDropdown /> </template>
<script lang="ts">
import TopBarProfileDropdown from 'components/layout/TopBarProfileDropdown';
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'TopBar',
  components: { TopBarProfileDropdown },
  setup() {
    return {}
  }
})
</script>

But I'm getting a TS compilation error:

enter image description here

How can I type assert an imported component and fix this?

EDIT1 Adding imported component:

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'TopBarProfileDropdown',
  setup() {
    return {}
  }
})
</script>

The component type is something like:

import TopBarProfileDropdown: ComponentPublicInstanceConstructor<...>


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source