Knobs broken for Vue components

Describe the bug The Knobs addon was working perfectly in v6 beta-21, but is no longer functioning correctly after upgrading to beta-25.

Using knobs on standard web elements works fine, but when passing as props to Vue components all values are being converted to strings and I receive the following error: Invalid prop: type check failed for prop "orange". Expected Boolean, got String with value "false".

I’ve also found that in some cases with components with only string props, no error is thrown but the default values within the component are used instead of the knobs and updating the knobs does not trigger any update (although knobs not used as props to Vue components continue to work).

I’ve tried both CSF and MDX story formats and both result in the same errors.

To Reproduce

Vue component

<template>
  <div :class="{ 'orange-spinner': orange }" />
</template>

<script>
import Vue from "vue";
export default Vue.extend({
  name: "TestSpinner",
  props: {
    orange: {
      type: Boolean,
      default: false,
    },
  },
});
</script>

Story

import { Story, Preview, Meta } from "@storybook/addon-docs/blocks";
import { withKnobs, boolean } from "@storybook/addon-knobs";
import TestSpinner from "./Spinner";

<Meta title="Components/Experimental/Spinner" component={TestSpinner} />

## Default

<Preview>
  <Story name="Base">
    {{
      components: { TestSpinner },
      props: {
        orange: {
          type: Boolean,
          default: boolean("Orange", false),
        },
      },
      template: `
    <TestSpinner :orange="orange" />
  `,
    }}
  </Story>
</Preview>

[piemasters]

Not sure if this issue still exists in the latest version of knobs, but I’ve fully transitioned over to controls and this is no longer an issue so happy for it to be closed.

[shilman]

@jowilhnson Yup. We have a few things to add to args/controls in 6.2 and then we’re going to deprecate knobs as part of the 6.2 milestone.