Vue Draggable cannot drop in other table

I have been working on this the entire morning and i'm getting there. I started from scratch using one of the samples from the vue.draggable web site. Then added and replace things to make it in to a couple of tables and i can move elements from one table to another. Now my problem is when the table is empty or becomes empty, then it does not accept an element. The documentation calls to give the element a minimum height, as you can see in the code below i have been adding the min-height everywhere but it doesn't work. My first attempt was to put the min-height on the draggable element, that did not work. Thanks for any ideas you may have:

<template>
    <div class="row">

        <table class="table dragArea">
            <thead>
                <tr>
                    <th>ID</th>
                </tr>
            </thead>
            <draggable v-model="approveDocsNew" :options="{group:'people'}" :element="'tbody'">
                <tr v-for="element in approveDocsNew" class="dragArea">
                    <td class="dragArea">{{element.document_id}}</td>
                </tr>
            </draggable>
        </table>
        <table class="table dragArea">
            <thead class="table">
                <tr>
                    <th>ID</th>
                </tr>
            </thead>
            <draggable v-model="forApprovalDocsNew" :options="{group:'people'}" :element="'tbody'">
                <tr v-for="element in forApprovalDocsNew" class="dragArea">
                    <td class="dragArea">{{element.document_id}}</td>
                </tr>
            </draggable>
        </table>
    </div>
</template>

<script>
    import draggable from 'vuedraggable'

    export default {
        components: {
            draggable
        },

        props: ['approvedDocs','forApprovalDocs'],

        data() {
            return {
                approveDocsNew: this.approvedDocs,
                forApprovalDocsNew: this.forApprovalDocs
            }
            
        },

        method: {

        }
    }
</script>

<style>
.dragArea {
  min-height: 10px;
}

</style>

Try adding an empty table row if there's no items in forApprovalDocsNew. That might work.

Thanks for the answer, right i'm starting with both tables with some data. The problem becomes when one of the tables gets empty. It seems to me a lot of programming to keep checking when one of the tables becomes empty, to then add a empty row there. Also i think that row will need to be made non-draggable. I will post on the vue draggable site a issue, and see what the response is. In the mean time i think i will make the tables into lists, which seem to be working

If anyone cares, i found the solution the min-height must be declared at the level for the drop to an empty table to work. Thanks for the help.

@DAN3460 - Could you explain this solution a little more? I am experiencing the same problem. I have put the min-height CSS option on dragArea, but when I look at the element in the browser console, it tells me the dragArea is 0x0 on an empty list. I tried including the dragArea in the class of my draggable component (a table row), but that did not change anything.