Why won't my delete item event emit to the parent?

I am trying to delete an item from my data attribute. A delete is triggered by the delete button on each item. That they triggers the deleteItem(index) function in the child component, which then emits to the parent. But for some reason it never triggers the event handler in the parent.

Help with the drag n drop would be a plus as well. Thank you.

https://jsfiddle.net/4Ld0ubjt/

<html>

<head>
    <title>

    </title>

    <!--- Import Vue.js library --->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
    <script src="vue.js"></script>
</head>

<body>
    <div class="panel-body">

        <div id="itemsApp" @delete-item="deleteItem(idx)">
            <list-item v-for="(item, index) in items" v-bind:index="index" v-bind:item="item"></list-item>
        </div>
    </div>
    <div class="panel-footer clearfix">
    </div>
    </div>
</body>

</html>
<!--- END: Main body --->

/**
    * Function to run after the Document has completed loading.
    */
$(function () {

    /**
    * Load and initialize the Module Object
    */
    Vue.component('list-item', {
        props: ['item', 'index'],
        template: `
            <div draggable="true" @dragStart="dragstart(index, $event)" @dragFinish="dragfinsih(index, $event)" class="bookmark list-group-item clearfix" :id="index">
                <span class="btn glyphicon glyphicon-menu-hamburger pull-left" title="Move Bookmark"></span>
                <a :href="item.URL_TE" :id="item.URL_HSH_NR">{{item.URL_NA}} - {{index}}</a>
                <div class="btn-group pull-right">
                    <a class="btn btn-default glyphicon glyphicon-pencil edit" role="button" title="Edit Bookmark" href="##"></a>
                    <button v-on:click="deleteItem(index)" class="btn btn-danger glyphicon glyphicon-remove delete" title="Delete Bookmark"></button>
                </div>
            </div>
        `,
        methods: {
            deleteItem(idx) {
                console.log("Index? " + idx);
                this.$emit('delete-item', idx);
            },
            /**********START DRAG AND DROP LOGIC********** */
            dragstart(which, ev) {
                console.log("In dragStart " + JSON.stringify(ev));
                ev.dataTransfer.setData('Text', which.index);
                ev.dataTransfer.dropEffect = 'move'
                this.dragging = which;
            },
            dragfinish(to, ev) {
                this.moveItem(this.dragging, to);
            },
            moveItem(from, to) {
                this.bookmarks.splice(to, 0, this.bookmarks.splice(from, 1)[0]);
            }
            /**********END DRAG AND DROP LOGIC********** */
        },
    })


    var itemsApp = new Vue({
        el: '#itemsApp',
        data: {
            items: [
                {
                    "URL_NA": "Some text",
                    "URL_HSH_NR": 558493829494,
                    "URL_TE": "SOME MORE TEXT"
                },
                {
                    "URL_NA": "Some text",
                    "URL_HSH_NR": 558493829494,
                    "URL_TE": "SOME MORE TEXT"
                }
            ]
        },
        methods: {
            deleteItem(i) {
                console.log("In parent deleteItem " + i);
                this.data.splice(i, 1);
            }
        }
    })

});

Solution

Event handler should be on child component

  <div id="itemsApp">
            <list-item v-for="(item, index) in items" v-bind:index="index" v-bind:item="item" @delete-item="deleteItem"></list-item>
        </div>

In Vue component, data should be a function

 var itemsApp = new Vue({
        el: '#itemsApp',
        data() {
           return {
            items: [
                {
                    "URL_NA": "Some text",
                    "URL_HSH_NR": 558493829494,
                    "URL_TE": "SOME MORE TEXT"
                },
                {
                    "URL_NA": "Some text",
                    "URL_HSH_NR": 558493829494,
                    "URL_TE": "SOME MORE TEXT"
                }
            ]
           }
        },
        methods: {
            deleteItem(i) {
                console.log("In parent deleteItem " + i);
                this.items.splice(i, 1);
            }
        }
    })

You can check demo here