title: How to pass a function to component to handle a drag event
body: <p>I want to use <code>v-for</code> and <code>is</code> to render the components I need. So I create the component Cube.vue like this:</p>
  <pre><code>&lt;script&gt;
  export default {
      name: 'cube',
      render: function(createElement) {
          return createElement(&quot;div&quot;,{
              props: {
                  style: {
                      type: Object
                  },
                  dragstartHandler: {
                      type: Function
                  },
                  classNames: {
                      type: Array|String|Object
                  }
              },
              style: this.style,
              attrs: {
                  draggable: &quot;true&quot;,
              },
              on: {
                  dragstart: this.dragstartHandler
              },
              'class': this.classNames
          },[
              createElement(&quot;div&quot;,{
                  class: [&quot;resizer&quot;, &quot;top-left&quot;]
              }),
              createElement(&quot;div&quot;,{
                  class: [&quot;resizer&quot;, &quot;top-right&quot;]
              }),
              createElement(&quot;div&quot;,{
                  class: [&quot;resizer&quot;, &quot;bottom-left&quot;]
              }),
              createElement(&quot;div&quot;,{
                  class: [&quot;resizer&quot;, &quot;bottom-right&quot;]
              }),
          ])
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>And then, I use it like this</p>
  <pre><code>&lt;component
      v-for=&quot;component in components&quot;
      :class=&quot;component.classes&quot;
      :key=&quot;component.refValue&quot;
      :is=&quot;component.type&quot;
      :style=&quot;component.style&quot;
      :dragstartHandler=&quot;component.dragstartHandler&quot;
      :ref=&quot;component.refValue&quot;
  &gt;
  &lt;/component&gt;
  </code></pre>
  <p>Everything as I expected, except the dragstartHandler. It throws an error</p>
  <pre><code>[Vue warn]: Invalid handler for event &quot;dragstart&quot;: got undefined
  </code></pre>
  <p>I try to console.log() the components. The result is :</p>
  <pre><code>[{…}, __ob__: Observer]
      0:
       classes: Array(2)
       dragstartHandler: ƒ ()
       refValue: &quot;cube-0&quot;
       style: Object
       type: &quot;cube&quot;
  </code></pre>
  <p>It really is a function. But I don't know why it go to undefined in the render. I have checked I didn't spell wrong.
  I just want pass the function to the component to handle the drag event. So how does it happened and what should I do to resolve it.
  The dragHandler function is these:</p>
  <pre><code>dragstartCopyHandler(event) {
        event.dataTransfer.setData(&quot;elementId&quot;, event.target.id);
        event.dataTransfer.setData(&quot;componentOffsetX&quot;, event.offsetX);
        event.dataTransfer.setData(&quot;componnetOffsetY&quot;, event.offsetY);
        event.dataTransfer.setData(&quot;dropEffect&quot;, &quot;copy&quot;);
        event.dataTransfer.dropEffect = &quot;copy&quot;;
      },
  dragstartMoveHandler(event) {
        console.log(&quot;move start&quot;)
        event.dataTransfer.setData(&quot;elementId&quot;, event.target.id);
        event.dataTransfer.setData(&quot;componentOffsetX&quot;, event.offsetX);
        event.dataTransfer.setData(&quot;componnetOffsetY&quot;, event.offsetY);
        event.dataTransfer.setData(&quot;dropEffect&quot;, &quot;move&quot;);
        event.dataTransfer.dropEffect = &quot;move&quot;;
      },
  </code></pre>
  <p>And I pass the dragstartMoveHandler to the component.</p>
  <pre><code>this.components.push({
              refValue: `${elementId}-${this.count}`,
              type: elementId,
              style: style,
              dragstartHandler: this.dragstartMoveHandler,
              classes: [&quot;component&quot;, elementId]
            });
  </code></pre>
  <p>I write the pages use js to control Dom before. And today I want to rewrite it with vue. So here might something wrong with the function, but the problem now is the function passed is undefined.</p>