storybook/docs/snippets/vue/button-implementation.3.ts.mdx

```html
<!-- Button.vue -->

<template>
  <!-- the component markup implementation -->
</template>

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

  export default defineComponent({
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'button',
    props: {
      /**
       * Button contents
       */
      label: {
        type: String,
        required: true,
      },
      /**
       * Is this the principal call to action on the page?
       */
      primary: {
        type: Boolean,
        default: false,
      },
      /**
       * How large should the button be?
       */
      size: {
        type: String,
        default: 'medium',
        validator: function (value) {
          return ['small', 'medium', 'large'].indexOf(value) !== -1;
        },
      },
      /**
       * What background color to use
       */
      backgroundColor: {
        type: String,
      },
    },
    emits: ['click'],
    setup(props, { emit }) {
      props = reactive(props);
      return {
        /**
         * Optional click handler
         */
        onClick() {
          emit('click');
        },
      };
    },
  });
</script>
```