component reactive in docs while not reactive in canvas

[Sebastian1830]

I have the same problem 😞

• node v12.20.2
• npm v6.14.11

mycomponent.vue

<template>
  <div>
    <div class='row'>
      <div class='col-12 bg-primary is-click'>
        <span class='text-h6 q-mx-sm'>{{ hi }}</span>
      </div>
      <div v-if='open' class='col-12 bg-grey-3'>
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, computed } from 'vue';

export default defineComponent({
  name: 'detailsHidden',
  props: {
    open: { type: Boolean, default: false },
    name: { type: String, default: 'Juan' }
  },
  setup(props) {
    const p = reactive(props)
    const hi = computed(() => { return `Welcome ${p.name} !` })
    return { hi }
  }
});
</script>

<style lang='scss' scoped>
  @import "detailsHidden.scss";
</style>

mycomponent.stories.js

import detailsHidden from './detailsHidden.vue';
import { QBtn } from 'quasar';

export default {
  title: 'Test/FuDetailsHidden',
  component: detailsHidden,
  argTypes: {
    name: { control: "text" },
    open: { control: "boolean" }
  }
}

const Template = (args, { argTypes }) => ({
    components: { detailsHidden, QBtn },
    props: Object.keys(argTypes),
    template: '<details-hidden v-bind="$props">' +
      '           <div class=\'q-mx-md q-my-md\'>\n' +
      '               <span>This is a storybook</span>\n' +
      '               <q-btn color="secondary" label="Secondary" class="q-ml-lg" />\n' +
      '           </div>' +
      '        </details-hidden>'
});

export const FirstStory = Template.bind({});
FirstStory.args = {
  name: 'Sophia',
  open: false
}

package.json

{
...
    "@storybook/addon-actions": "^6.2.0-alpha.29",
    "@storybook/addon-essentials": "^6.2.0-alpha.29",
    "@storybook/addon-links": "^6.2.0-alpha.29",
    "@storybook/addon-postcss": "^2.0.0",
    "@storybook/vue3": "^6.2.0-alpha.29",
...
}

What can be wrong? , please help me 🙌

Originally posted by @Sebastian1830 in #11501 (comment)

[phated]

@Sebastian1830 the way you write stories for Vue 3 has recently been changed. You now need to use:

const Template = (args) => ({
    components: { detailsHidden, QBtn },
    template: '<details-hidden v-bind="args">' +
      '           <div class=\'q-mx-md q-my-md\'>\n' +
      '               <span>This is a storybook</span>\n' +
      '               <q-btn color="secondary" label="Secondary" class="q-ml-lg" />\n' +
      '           </div>' +
      '        </details-hidden>',
    setup() {
        return { args };
    }
});

[Sebastian1830]

Thank you very much, is there any place where I can access the information of the most recent changes? 😃

[shilman]

https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md