Proper Type for Vue Imported Component to use with the Dynamic Component

Question

I'm trying to pass a component through props to be rendered using the <Component :is=""> component, but can't seem to figure out the right types to be using.

Type definition is as follows

import type { Component } from "vue";

export interface GridColumn {
    // not relevant stuff here
    component?: Component,
}

Then within my component I have, the following, which has no complaints at this point.

import Severity from "@/modules/playground/grid-columns/Severity.vue";
import type { DataRow, GridColumn } from "@/components/grid/grid-column.type";

const columns: GridColumn[] = [
    {
        component: Severity,
    }
];

But when I get into the actual usage rendering it gives a type error, but still renders as expected.

<template>
    <Component 
        v-if="col.component" 
        :is="col.component"
    ></Component>
</template>

The is property line above is highlighted in my editor (PHPStorm 2023.1) as an error:

Type (ComponentOptionsBase<any, any, any, ComputedOptions, MethodOptions, any, any, any> & ThisType<CreateComponentPublicInstance<{}, any, any, ComputedOptions, MethodOptions, any, any, any, Readonly>>) | FunctionalComponent<any, any> | ComponentPublicInstanceConstructor is not assignable to type string | ComponentDefinition

Answer 1

This is the IDE issue, please follow WEB-60065 and linked tickets for updates