Document Vue component controllers as function instead objects

[rafaelcamargo]

By now, we declare an object to represent some Vue component controller. In some cases, it leads to unpleasant experiences. In addition, documenting Vue component controllers as function will make clearer how exactly to import the components used on the example.

How it is currently done:

{
  title: 'Default Button',
  controller: {
    methods: {
      onClick(){
        window.alert("Clicked!");
      }
    }
  },
  template: `
  <pd-button :on-click="onClick">
    Click Here
  </pd-button>`
}

How it should be done:

{
  title: 'Default Button',
  controller: function(){
    const { pdButton } = myComponentsLib; // Make clearer where the component comes from

    return {
      components: {
        pdButton
      },
      methods: {
        onClick(){
          window.alert("Clicked!");
        }
      };
    }
  },
  template: `
  <pd-button :on-click="onClick">
    Click Here
  </pd-button>`
}