Question: SOLVED: 
My bad.The problem is in my code logic, the tempLatest array is always empty so the array that contains the card never been updated. btw, thank you for all your answers

I want to create a program that show a collection of card. That collection will be updated every 15 seconds. But here comes the problem, the v-for doesn't update directly when a new card added to the list but when the page is refreshed it shows the proper output.

here is my code

```
<PersonCard v-for="item in latest" v-bind:key="item.id" :attendeeName="item.name" :image="item.picture" :department="item.department"/>

```

```
data() {
        return {
            latest: [],
            imgArr: [],
            notReady: true,
        }
    }

```

```
created() {
        console.log(this.site, this.sinceTime)
        this.fetchRecognizedFace();
        this.timer = setInterval(this.fetchRecognizedFace, 15000);
    }

```

```
// update this.latest
for (var j = 0; j < tempLatest.length; j++) {
    this.latest.unshift(tempLatest[j]);
}

```

Answer: 
I managed to make this work by using cdkDragStarted and cdkDragDropped

HTML:

```
 <mat-row
        cdkDrag
        cdkDragHandle
        (cdkDragStarted)="dragStarted($event)"
        (cdkDragDropped)="dragStopped($event)"
    >
    </mat-row>

```

TS:

```
dragStarted(event: any) {
this.dataSource.data.splice(
  this.dataSource.data.findIndex(
    (d: TableRow) => d.ID === event.source.data[0].ID
  ) + 1,
  0,
  event.source.data[0]
);
this.table?.renderRows();
}

dragStopped(event: any) {
this.dataSource.data.splice(
  this.dataSource.data.findIndex(
    (d: TableRow) => d.ID === event.item.data[0].ID
  ),
  1
);
this.table?.renderRows();
}

```
I don't think is possible with angular-material. Here is a possible solution

```
<div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}} <span (click)="copyMe(item)">Copy</span> </div>

```

```

 copyMe(item: any) {
    console.log(item)
    const newItem = item
    this.todo.push(newItem)
  }

```

Stackblitz: <https://stackblitz.com/angular/xlkxgkneavr?file=src%2Fapp%2Fcdk-drag-drop-connected-sorting-group-example.ts>