Storybook: Composition api story support

[macieklad]

Hello, right now I'm starting to use the nuxt composition api plugin. What I've observed is that inside storybook, component setup functions are called, however, computed properties are not updated when the controls change.

When I migrate computed property to old syntax, it works like a charm, so I'm guessing it could be something with story renderer. Moreover, adding composition api plugin to the Vue instance of story itself did not work. There is also storybook 6.2 on the horizon with vue3 support, so there is the question whether it will work with compatibility layer for vue2.

Do you have any suggestions what could be wrong and if there is an option to add such support to this module? I would be happy to help.

To reproduce the issue, you simply need to install a fresh nuxt instance, install vue composition api module and the storybook one, then write a story for a component with 3.0 syntax, the component I was running my tests on was:

// story
import Toggle from './Toggle'

export default {
  title: 'Toggle',
  component: Toggle,
  argTypes: {
    active: {
      control: {
        type: 'boolean',
      },
      defaultValue: true,
    },
  },
}

export const Basic = (arg, { argTypes }) => ({
  components: { Toggle },
  props: Object.keys(argTypes),
  template: '<Toggle v-bind="$props" />',
})

```vue
// Toggle.vue

`````

[farnabaz]

It seems that composition api works on docs tab and does work on canvas. This is surely related to different rendering routines in these tabs.

Do you have any suggestions what could be wrong and if there is an option to add such support to this module? I would be happy to help.

Contribution is more than welcome :slightly_smiling_face:
Looking at canvas render function is a good way to start looking for solution. https://github.com/nuxt-community/storybook/blob/master/storybook/nuxt-entry.js#L125

[macieklad]

Thank you, I'm gonna look into that 👍

[AlexisWalravens]

@macieklad Did you ever solve the issue ?

[macieklad]

Partially, the composition api worked on the docs tab because it triggered complete component rerender, that;s what I got from debugging the repo. In the meantime version 6.2 was announced for the storybook with the vue 3 support, so I closed this issue (sorry for not leaving any explanations). I did not have enough time to try this new version with it as I switched projects in the meantime. But one of the workarounds would be the complete rerender as I just pointed out.