tag prop doesn't work with local components

[duncan-oxd]

Jsfiddle link

https://codepen.io/oxd_duncan/pen/poZaXOQ

Step by step scenario

It looks like the "tag" prop only works with components registered globally:

Create a minimal working VueDraggable instance with (for example) the "table" tag prop:

    <vue-draggable
      force-fallback
      tag="table"
      class="draggable-table"
      v-model="rows"
    >
      <tr v-for="row in rows" :key="row">
        <td>{{ row }}</td>
        <td><b>This is a row in VueDraggable</b></td>
      </tr>
    </vue-draggable>

Create a minimal component to use instead of the table in the tag prop:

{
  name: "TableComponent",

  template: `
  <table class="table-component">
    <slot>this is the default slot</slot>
  </table>
  `
}

Change tag="table" to tag="TableComponent" and you get an error:

...did you register the component correctly? For recursive components, make sure to provide the "name" option.

Actual Solution

Seems to work if I register the component globally

Vue.component("FilesTable", FilesTable);

...but that's not ideal.

Expected Solution

It should work if I register the component locally and pass in the component name for the tag prop, or pass in the component object itself. (Like you can do with the <component :is="..." /> prop.

<draggable :component="MyComponentObject" ... >

import MyComponentObject from "@/components/MyComponentObject.vue";

export default {
  data() {
    return { MyComponentObject }
  }
}

[hjardines]

I second this, I'm having the same issue, had to declare it globally. Vue.component('Element', Element)