[Bug]: Intersection prop types disrupt Controls behavior in Vue3

[BoppLi]

Describe the bug

When we use Typescripts intersection (&) types for defining the prop type of a Vue3 component, we experience an unexpected behavior on the Storybook controls:

1. The mandatory star is missing
2. The "Props" category/headline is missing
3. The descriptions column is empty

To show the problem better, see an example below of a standard component which only has props foo (required) and bar (optional):

In comparison, this is what happens when we add an intersection type for the property baz:

To Reproduce

Reproduction on Stackblitz

Combining two types with & is causing the Controls in Storybook to misbehave.
Example for such a type intersection:

<script lang="ts" setup>
type ImportedExampleType = { 
  /** baz description */
  baz: string
 };
type DemoProps = {
  /** foo description */
  foo: string;
  /** bar description */
  bar?: string;
} & ImportedExampleType; // the intersection here results in the bug behavior

defineProps<DemoProps>();
</script>

Relevant Files:

System

Storybook Environment Info:

  System:
    OS: macOS 12.6.9
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.9.2 - ~/homebrew/bin/pnpm <----- active
  Browsers:
    Chrome: 120.0.6099.216
    Edge: 120.0.2210.133
    Safari: 16.6
  npmPackages:
    @storybook/addon-essentials: ^7.6.7 => 7.6.7 
    @storybook/blocks: ^7.6.7 => 7.6.7 
    @storybook/vue3: ^7.6.7 => 7.6.7 
    @storybook/vue3-vite: ^7.6.7 => 7.6.7 
    storybook: ^7.6.7 => 7.6.7

Additional context

Being able to use intersection types would help us a great deal because it allows us to share common prop types between components, e.g. required, min, minLenght, ... for form control components.

[larsrickert]

This issue is fixed by the open PR #22285