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

Question

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

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

ts

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).