argTypes mapping doesn't work with Vue props

Describe the bug When using the new mapping feature for an argType that corresponds to a prop of a Vue component, the mapping is applied to the value that is passed to args, but is not applied to the value of the prop that is passed to the component.

To Reproduce Steps to reproduce the behavior:

1. Create a story for a Vue component, with automatic prop detection (using the docs addon)
2. For one of the props, add an entry to the story’s argTypes that includes options and mapping keys
3. Open the story in the browser, and change the value of this prop back and forth

Expected behavior The mapping should be applied to the value of the prop, but it’s not.

Code snippets

import MyButton from './Button.vue`;
import Vue from 'vue';
import { Args, StoryContext } from '@storybook/addons';

export default {
	title: 'Components/Button',
	component: MyButton,
	argTypes: {
		label: {
			options: [ 'short', 'medium', 'long' ],
			mapping: {
				short: 'Short',
				medium: 'Medium text',
				long: 'Very long text that is meant to demonstrate how the button wraps text'
			},
			defaultValue: 'short',
			control: 'inline-radio'
		}
	}
};

export const SimpleStory = ( _args: Args, { argTypes } : StoryContext ) : Vue.Component =>
	Vue.extend( {
		components: { MyButton },
		props: Object.keys( argTypes ),
		template: `<my-button v-bind="$props" />`
	} );

With this snippet, I expect the label of the button to change between Short, Medium text and Very long text that... (the mapped values) when the user clicks the radio buttons in the controls panel. Instead, the label of the button changes between short, medium and long (the unmapped values).

Interestingly, if you put console.log( _args.label ) somewhere (either in the arrow function above Vue.extend, or in a mounted lifecycle hook), it prints Short, indicating that the values in _args are mapped correctly. That mapping just isn’t applied to the props that are passed to the Vue component.

(I’m using Vue 2 here, I haven’t tested this with Vue 3.)

System

$ npx sb@next info

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    npm: 7.6.0 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Firefox: 87.0
  npmPackages:
    @storybook/addon-a11y: 6.2.1 => 6.2.1 
    @storybook/addon-actions: 6.2.1 => 6.2.1 
    @storybook/addon-backgrounds: 6.2.1 => 6.2.1 
    @storybook/addon-controls: 6.2.1 => 6.2.1 
    @storybook/addon-docs: 6.2.1 => 6.2.1 
    @storybook/addon-links: 6.2.1 => 6.2.1 
    @storybook/addon-storysource: 6.2.1 => 6.2.1 
    @storybook/addon-viewport: 6.2.1 => 6.2.1 
    @storybook/vue: 6.2.1 => 6.2.1 

┆Issue is synchronized with this Asana task by Unito

[xander-marjoram]

This issue is still active.

[msetegn]

Can confirm that this is still an issue