Сумка Angular Dragula не работает должным образом

Question

Я вложил сложный объект как -

Демонстрация здесь - https://stackblitz.com/edit/ng2-dragula-base-qwvjyp

Т.С.

tables = [
    { id: 0,
      name: "Bad Vamp",
      subitems: [
        { name: "one" },
        { name: "two" }
      ]
    },
    {
      id: 1,
      name: "Petrovitch the Slain",
      subitems: [
        { name: "three" },
        { name: "four" }
      ]
    }
  ];

HTML

<div class="flex" dragula="BAG" [(dragulaModel)]="tables">
  <table *ngFor="let table of tables"> 
    <tr>
      <td dragula="BAG" [(dragulaModel)]="table.subitems">
        <div class="vamp" *ngFor="let item of table.subitems">{{item.name}}</div>
      </td>
    </tr>
  </table>
</div> 

ЦЕЛЬ - я пытаюсь добиться того, чтобы у меня был стол, который можно переупорядочить, и предметы в td Также должен быть переупорядочен. Примечание: у TD может быть другой стол, поэтому одно и то же имя сумки BAG был использован.

ПРОБЛЕМА. Проблема в том, что элементы в ячейке td работают должным образом, однако таблицы не перетаскиваются.

1. Это работает, если я удаляю внутренние СУМКИ.
2. Это работает, если я перетащить, нажав на край таблицы. однако это должно быть перетаскиваемым, если пользователь начинает перетаскивать ячейку (td).