Control boolean with default value in component is not initialized correctly (vue js component)

Describe the bug props in vue js component with default value to true and a story which have the props set to false in the template not init correctly the component in storybook.

To Reproduce Steps to reproduce the behavior: I do a component using vue js. This component have a props isPrimary with default value set to true. In the template of the story is set this props to false.

Additional info If you set to false as default in the component and set to true the template in the story, the storybook behavior is correct. We see the control set to true and the component display true.

Expected behavior I expected to see the control set to false. And my component receive a props with false

Screenshots

After toggling true/false storybook behavior is as expected.

Code snippets The vue component:

<template>
  <div>isPrimary: {{ isPrimary }}</div>
</template>

<script>
export default {
  name: "test-boolean",
  props: {
    isPrimary: {
      type: Boolean,
      default: true,
    },
  },
}
</script>

The story:

import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks"
import { TestBoolean } from "../../../components"

<Meta
  title="Components/Action/TestBoolean"
  component={TestBoolean}
  argTypes={{
    isPrimary: {
      control: "boolean"
    },
  }}
/>

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  template: '<test-boolean :is-primary="isPrimary"/>',
})

<Canvas>
  <Story name="bug" args={{ isPrimary: false }}>
    {Template.bind({})}
  </Story>
</Canvas>

System

Environment Info:

  System:
    OS: macOS 11.2.1
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Node: 12.20.0 - ~/.asdf/installs/nodejs/12.20.0/bin/node
    npm: 6.14.8 - ~/.asdf/installs/nodejs/12.20.0/bin/npm
  Browsers:
    Chrome: 88.0.4324.192
    Safari: 14.0.3
  npmPackages:
    @storybook/addon-backgrounds: ^6.1.17 => 6.1.17 
    @storybook/addon-docs: ^6.1.16 => 6.1.17 
    @storybook/addon-essentials: ^6.1.16 => 6.1.17 
    @storybook/addon-links: ^6.1.16 => 6.1.17 
    @storybook/theming: ^6.1.16 => 6.1.17 
    @storybook/vue: ^6.1.16 => 6.1.17 

[Hypenate]

We fixed this by using args and argTypes

[phoniks]

@Hypenate - more details on your solution, please? I’m having what I think is a similar issue. I have a button which I’d like to be able to see both the enabled and disabled states in one story. If I set args it works, but using the toggle in the controls panel doesn’t seem to have the desired effect. If I log the value of the variable (in my actual Button component) then I see undefined which leads me to believe I’m missing a step in configuring my story, but I’ve gone through the docs a few times to no avail.

Editing to clarify: I can set the property to either true or false with args but the switch doesn’t work in the control panel. No matter what I toggle that to, the component always has the value that was set in args.