Repository: storybook
Issue: (addon-controls) Support destructering object properties into individual controls
Labels: feature request,addon: controls,medium

**Is your feature request related to a problem? Please describe.**

Im often passing objects to my (Vue) components which by default will be added as JSON.stringified text control by `@storybook/addon-controls`. As I feel this is confusing/limited functionality (also because the JSON object isnt pretty printed (ie `JSON.stringify(obj, null, 2)`) I'd like to destructure my object properties into separate controls for each individual object property.

I have currently implemented this as follows in this stripped-down User example below
<details><summary>User.vue</summary>

```js
// User.vue
<template>
  <p>The name of the user is: {{ user.name }}</p>
</template>

<script>
export default {
  props: {
    user: {
      type: Object,
      required: true
    }
  }
}
</script>
```
</details>

<details><summary>User.story.js</summary>

```js
import User from '../User.vue'

export default {
  title: 'User',
  component: User,
  argTypes: {
    user_name: {
      control: 'text',
      defaultValue: 'pimlie',
      table: {
        category: 'user',
        type: {
          summary: 'text',
        }
      }
    }
  }
}

const Template = (args, { argTypes }) => {
  console.log(argTypes)
  return {
    components: {
      User
    },
    props: Object.keys(argTypes),
    watch: {
      user_name: {
        immediate: true,
        handler(value) {
          // use $set to ensure reactivity in case name
          // prop doesnt exist on this.user yet
          this.$set(this.user, 'name', value)
        }
      }
    },
    template: '<User :user="user" />',
  }
}

export const Primary = Template.bind({});
Primary.args = {
  user: {
    name: ''
  }
}

```
</details>

(Note: in reality I have abstracted creating the argTypes & watchers to also easily support nested objects, eg to support a dot-path like `blog.message.user.name`)

**Describe the solution you'd like**
I would like that `addon-controls` would have improved support for the above (or a similar) strategy as the current approach of stringifying any object prop doesnt seem very user friendly

Also the above approach has several disadvantages:
- in your _ArgsTable_ you will have both a  `user` control with type object as a `user_name` control with type text
- the actual values of these 2 controls are in sync, so if you change the value of `user_name` the rendered component will show the new value. **But** the stringified value in the `user` object control will not be in sync, it will only show the second to last update. To explain by example:
  - Start with `user` & `user_name` both with value `pimlie` for name
  - Change `user_name` control to `pimlie2`
  - The rendered component updates to `pimlie2`, but the `user` object control will still show `pimlie`
  - Change `user_name` control to `pimlie` again
  - The rendered component updates to `pimlie`, but the `user` object control will now show `pimlie2`
- atm it seems you are unable to change the name of a custom `argType` in the table. See screenshot below, you can group the `user_name` prop but I would also like the label in the `ArgTable` to read just _name_ instead of _user\_name_

**Describe alternatives you've considered**
see above

**Are you able to assist bring the feature to reality?**
sure, I can help with testing

**Additional context**
![image](https://user-images.githubusercontent.com/1067403/90391393-5dfb9200-e08d-11ea-9029-f0e07ca82909.png)