ng-dynamic-component | Dynamic components with full life

Context:

I am currently working on a complex application that uses vuetify's(Vuetify1.5) expansion panel, where I need to bind/highlight the canvas based on which expansion panel is expanded. (In the demo below I have recreated the same issue with v-chip instead of canvas).

To achieve the above thing I am following the below steps.

S1: Computed on v-model gives me the expanded/user expanded expansion panel index

S2: Match the index with items index and highlight the element.

Few things to note:

1.Cannot use item index as key for expansion panel as it reduces the performance,re-renders entire expansion panel component. How to improve performance while using dynamic components in vue?

2.Cannot use a boolean array for panel v-model as I need the index to highlight the right v-chip.

Problem:

Wrong canvas/v-chip is getting highlighted when I try to add/push a new element into the items array used by the expansion panel.

This seems to be an existing issue and is being reported here: https://github.com/vuetifyjs/vuetify/issues/11225

Is there any workaround for this issue?

I have an Angular 11 application, which imports @angular/material, @ngx-translate, and a lib called icell-data-table.

Downloading the example project from the github page I was able to start it witout any problems on my local environment.

But upon extracting it to a Stadckblitz demo, I have encountered a strange error: