diff --git a/addons/docs/src/frameworks/vue/extractArgTypes.ts b/addons/docs/src/frameworks/vue/extractArgTypes.ts
index ca65e50f1e3e..6a0fc052335d 100644
--- a/addons/docs/src/frameworks/vue/extractArgTypes.ts
+++ b/addons/docs/src/frameworks/vue/extractArgTypes.ts
@@ -17,10 +17,17 @@ export const extractArgTypes: ArgTypesExtractor = (component) => {
     props.forEach(({ propDef, docgenInfo, jsDocTags }) => {
       const { name, type, description, defaultValue: defaultSummary, required } = propDef;
       const sbType = section === 'props' ? convert(docgenInfo) : { name: 'void' };
-      let defaultValue = defaultSummary && (defaultSummary.detail || defaultSummary.summary);
+      let defaultValue: any = defaultSummary && (defaultSummary.detail || defaultSummary.summary);
       try {
         // eslint-disable-next-line no-eval
         defaultValue = eval(defaultValue);
+        // B/c Vue requires that Object/Array defaults be supplied as factory functions.
+        if (
+          typeof defaultValue === 'function' &&
+          ['object', 'array', 'other'].includes(sbType.name)
+        ) {
+          defaultValue = defaultValue();
+        }
         // eslint-disable-next-line no-empty
       } catch {}
 
diff --git a/examples/vue-kitchen-sink/src/stories/Button.vue b/examples/vue-kitchen-sink/src/stories/Button.vue
index 4a20dfb5f9ac..67fecf7c8a55 100644
--- a/examples/vue-kitchen-sink/src/stories/Button.vue
+++ b/examples/vue-kitchen-sink/src/stories/Button.vue
@@ -2,7 +2,7 @@
   <button
     class="button"
     :style="{ color, borderColor: color }"
-    :class="{ rounded }"
+    :class="computedClasses"
     @click="onClick"
     @dblclick="onDoubleClick"
   >
@@ -20,12 +20,28 @@
         type: Boolean,
         default: false,
       },
+      corners: {
+        type: [Boolean, Array],
+        default: () => [false, false, false, false],
+      },
       color: {
         type: String,
         default: '#42b983'
       }
     },
 
+    computed: {
+      computedClasses() {
+        return {
+          rounded: this.rounded,
+          'rounded-top-left': this.corners[0],
+          'rounded-top-right': this.corners[1],
+          'rounded-bottom-right': this.corners[2],
+          'rounded-bottom-left': this.corners[3],
+        }
+      }
+    },
+
     methods: {
       onClick($event) {
         /**
@@ -51,6 +67,18 @@
 .rounded {
   border-radius: 5px;
 }
+.rounded-top-left {
+  border-top-left-radius: 5px;
+}
+.rounded-top-right {
+  border-top-right-radius: 5px;
+}
+.rounded-bottom-right {
+  border-bottom-right-radius: 5px;
+}
+.rounded-bottom-left {
+  border-bottom-left-radius: 5px;
+}
 
 .button {
   border: 3px solid;
diff --git a/examples/vue-kitchen-sink/src/stories/components/button.stories.js b/examples/vue-kitchen-sink/src/stories/components/button.stories.js
index 36ed1818287f..9168cdad9274 100644
--- a/examples/vue-kitchen-sink/src/stories/components/button.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/components/button.stories.js
@@ -11,7 +11,7 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { MyButton },
-  template: '<my-button :color="color" :rounded="rounded">{{label}}</my-button>',
+  template: '<my-button :color="color" :rounded="rounded" :corners="corners">{{label}}</my-button>',
 });
 
 export const Rounded = Template.bind({});
@@ -27,3 +27,11 @@ Square.args = {
   color: '#00f',
   label: 'A Button with square edges',
 };
+
+export const Varied = Template.bind({});
+Varied.args = {
+  rounded: false,
+  corners: [true, false, true, false],
+  color: '#00f',
+  label: 'A Button with varied edges',
+};