Ionic4 - Nested reorder groups problem - 2nd level reorder stops working after moving 1st level component

TL/DR

Nested (2nd level) ion-reorder-group stops working, after moving its parent in higher ion-reorder-group (1st level).

The demo project is here: ionic4 nested reorder

Any idea what’s wrong?

The Case

I have an ion-reorder-group containing a list of questions. Each of the questions have nested ion-reorder-group with answers. User shall be able to reorder the questions, and reorder answers on the list of each question. Both, the questions and the answers, use handle for drag and drop.

The Problem

This works correctly when the page is rendered for the first time. But when a question is moved, the nested reorder list with the answers does not work anymore - the handle of the answer now drags the whole question.

Expected Behavior

The nested reorder list shall work correctly, after its 1st level reorder object is reordered.

My clunky workaround

By trial and error, I figured out, that the answers can be reordered again, if I use *ngIf=“hide” to hide the reorder list after moving of a question, and asynchronously let it appear again.

questionMoved() {
   this.hideAnswers = true;
   setTimeout(()=>{
     this.hideAnswers = false;
   }, 0);
}
<ion-reorder-group
  *ngIf="!this.hideAnswers"
  disabled="false"
  (ionItemReorder)="itemReorder($event)"
>

HomePage - the list of questions

...

export class HomePage {
questions = [
    {
      question: "Question 1",
      answers: ["Yes","No","Not sure",]
    },
    {
      question: "Question 2",
      answers: ["A","B","C","D",]
    },
    {
      question: "Question 3",
      answers: ["Yes","No","Not sure",]
    }
  ];

itemReorder(event) {
    event.detail["complete"](true);
}
...
<ion-reorder-group
    (ionItemReorder)="itemReorder($event)"
    disabled="false"
    id="reorderQuestions"
  >
      <div 
        *ngFor="let current of this.questions; let i = index" 
        class="question"
      >
        <ion-item>
          <ion-reorder slot="end" style="border: 2px solid black;"></ion-reorder>
          <ion-label>{{ current.question }}</ion-label>
        </ion-item>
        <ion-item>
          <app-answers
            style="width: 75%;"
            [answers]=current.answers
          ></app-answers>
        </ion-item>
      </div>
  </ion-reorder-group>

Answers component - the list of answers

This component is used in each of the question.

@Component({
  selector: 'app-answers',
  templateUrl: 'answers.component.html',
  styleUrls: ['answers.component.scss'],
})
export class AnswersComponent {

  @Input() answers = [];

  itemReorder(event) {
    event.detail["complete"](true);
    event.stopPropagation();
  }

}
<ion-reorder-group
  disabled="false"
  (ionItemReorder)="itemReorder($event)"
>
  <ion-item 
    *ngFor="let current of this.answers; let i = index" 
    class="answers"
  >
    <ion-label>{{ current }}</ion-label>
    <ion-reorder slot="end" style="border: 2px solid black;"></ion-reorder>
  </ion-item>
</ion-reorder-group>