Vue.draggable: Not working require scripts NPM

[wdda]

Scripts from cdnjs work:

<script src="/js/table_editor.js"></script> //window.Vue = require("vue");

<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.6.0/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.13.1/vuedraggable.min.js"></script>

<script>
 my template vue table
</script>

<script src="/js/my_vue_script.js"></script>

---

When I try to connect so it doesn't work:

<script src="/js/table_editor.js"></script> 
//window.Vue = require("vue");
//var draggable = require('vuedraggable')

<script>
 my template vue table
</script>

<script src="/js/my_vue_script.js"></script>

Error:

Unknown custom element: draggable - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Are there any ideas why this is so?

It seems that sortablejs have to go before vuedraggable at compile time, but there's not. First vuedraggable and after sortablejs.

I use:
NPM 5.0.0
Node: 8.0.0
Laravel 5.4
webpack-mix

Link to table_editor.js

[David-Desmaisons]

Do:

var draggable = require('vuedraggable')
  ...
  export default {
        components: {
            draggable,
        },
  ...

[wdda]

It doesn't work. Maybe my approach (without modules) it's impossible?
I'm trying to fix it for six hours. :(

Here's the latest example:

window.Vue = require("vue")
var draggable = require('vuedraggable')

Vue.component('items-table', {
    template: '#items_table',
    props: ['items']
});

Vue.component('item', {
    props: ['item'],
    template: '#item',
    methods: {
        enableEdit: function (key, e) {
            console.log(key);
            this.item[key].isEdit = true;

            Vue.nextTick(function () {
                $('input.edit:visible').focus();
            })
        },
        disableEdit: function(key)
        {
            if(key == 'price') {
                this.item[key].value = parseFloat(this.item[key].value).toFixed(2);
            }

            if(key == 'quantity') {
                this.item[key].value = parseInt(this.item[key].value);
            }

            this.item[key].isEdit = false;
        },
        deleteItem: function(){
            var index = this.$root.items.map(function(e) { return e.id; }).indexOf(this.item.id);
            this.$root.items.splice(index, 1);
        }
    }
});

var proformaOrder = new Vue({
    el: '#proforma_items',
    components: { draggable },
    methods: {
        addEmpty: function () {
            //Финт для нормального копирования объекта
            var itemEmptyNew = JSON.stringify(itemEmpty);
            itemEmptyNew = JSON.parse(itemEmptyNew);
            itemEmptyNew.id = this.items.length;

            this.items.unshift(
                itemEmptyNew
            );
        },
        addAsArticle: function () {
            var article = $('#searchArticle').val();

            $.ajax({
                type: 'GET',
                url: '/purchase/proforma-order/ajax/add-items/' + article,
                success: function (item) {
                    if (item) {
                        proformaOrder.items.unshift(JSON.parse(item));
                    }
                }
            });
        },
        resetTable: function () {
            this.items = itemsReset.slice(0); //Copy array
        }
    },
    data: function () {
        return {
            items: items
        };
    }
});

Vue works, vuedraggable no. The error is the same.

[David-Desmaisons]

Try to Add:
components: { draggable },
on the item component

[wdda]

Vue.component('items-table', {
    components: { draggable },
    template: '#items_table',
    props: ['items']
});

Yes! It works!
Thank you! Thank you!