Vue3 default prop (string) value is wrapped in quotes

Describe the bug When using a default value for a string type prop, like the below example, Storybook will wrap it in quotes failing the validation and breaking the component.

    defaultOrder: {
      type: String,
      default: 'desc',
      validator: (value: string) => ['desc', 'asc'].includes(value),
    },

This results in the following control:

Which is actually the string "desc" instead of just desc, breaking the component.

To Reproduce Add my prop to a component and create a story for it.

Expected behavior The string value to not be wrapped.

Screenshots See above.

System

  System:
    OS: macOS 11.2.1
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Node: 12.19.0 - ~/.nvm/versions/node/v12.19.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v12.19.0/bin/yarn
    npm: 6.14.10 - ~/.nvm/versions/node/v12.19.0/bin/npm
  Browsers:
    Chrome: 88.0.4324.192
    Edge: 88.0.705.74
    Firefox: 81.0.2
    Safari: 14.0.3
  npmPackages:
    @storybook/addon-actions: ^6.2.0-beta.2 => 6.2.0-beta.2
    @storybook/addon-essentials: ^6.2.0-beta.2 => 6.2.0-beta.2
    @storybook/addon-links: ^6.2.0-beta.2 => 6.2.0-beta.2
    @storybook/vue3: ^6.2.0-beta.2 => 6.2.0-beta.2

Additional context We’re using MDX files for the stories, not sure if this also happens in regular story JS files.

┆Issue is synchronized with this Asana task by Unito

[TheDutchCoder]

All working, excellent work!

[TheDutchCoder]

Okay I found that if I strictly type my property it does work, so there must be some TS magic happening:

type SortOrder = 
  | 'desc'
  | 'asc'

// ...

    defaultOrder: {
      type: String as PropType<SortOrder>,
      default: 'desc',
      validator: (value: string) => ['desc', 'asc'].includes(value),
    },