README.md

The files do not work like with handlers named onClick.

If I rename it to clickAction (and click-action=... in DropZone.story.js), it works and I see the action being called.

DropZone.story.js

import Vue from "vue";

import { storiesOf } from "@storybook/vue";
import { action } from "@storybook/addon-actions";
import DropZone from "./DropZone.vue";

Vue.component("DropZone", DropZone);

storiesOf("DropZone", module)
  .add("default", () => ({
    components: { DropZone },
    render() {
      return <DropZone on-click={action("clicked on dropzone")} />;
    }
  }));

DropZone.vue

<template>
  <div :class="{[$style.root]: true, [$style.dragging]: dragging}" v-on:click.stop.prevent="onClick">
    <div :class="$style.adder">
      <span :class="$style.info">click here to create a new todo!</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["dragging", "onClick"]
};
</script>

<style lang="scss" module>
.root {
  background: transparent;
  position: relative;
  height: 1px;
  border-radius: 0.2em;
  box-shadow: 0 0 0.1em;
  width: 100%;
}

.adder {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -12px;
  height: 25px;
  width: 100%;

  &:hover {
    background-color: rgba($color-create, 1);
    border-radius: 1em;
    box-shadow: 0 0 1em rgba($color-create, 0.8);

    .info {
      display: block;
    }
  }
}

.info {
  display: none;
}
</style>

1. The "on-click" Problem:
   I'm not completely sure, but I guess you can't pass "on-click" as a Property from parent to child component, since this is a registered handlers for vue tags: https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth Therefore it's actually a event handlers, not a property

2. Communication between Parent and Child Components
   So, now, why does the click handlers don't work (regardless is property or not) - I don't really know, but:
   I would suggest to use an emit instead of passing a function from DropZone.story to DropZone. Of course it's basically just JavaScript and Vue allows you to pass functions between components. One problem is that you add knowledge to the partner-components which aren't really necassary.

You can add a click-handler in DropZone in the wrapping div and emit to the parent: Hey I was clicked:

<template>
  <div :class="{[$style.root]: true, [$style.dragging]: dragging}" @click.stop.prevent="clickHandler">
    <div :class="$style.adder">
      <span :class="$style.info">click here to create a new todo!</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["dragging"],
  methods: {
    clickHandler() {
      this.$emit('clicked');
    },
  },
};
</script>

and the parent listens on this emit-event:

  render() {
    return <Dropzone on-clicked={action("clicked on dropzone")} />;
  }

(on-click won't work. The Emit Event should be called "clicked" or "was-clicked" or whatever you want)