I have a Handsontable in component that iterates using v-for, but when we add second object in array and it get created using v-for , the Handsontable object overrides the first object and causes an issue. Can you help resolve this?

Tags: #<Tag:0x00007f135f4583e0> #<Tag:0x00007f135f463f60>
#1

I have a Handsontable in component that iterates using v-for, but when we add second object in array and it get created using v-for , the Handsontable object overrides the first object and causes an issue. Can you help resolve this?
it’s for vue3

ex:

<parent-component>
    <div v-for="table,index in dataObjectArray" :key="index">
    <child/>
    </div>
</parent-component>

<child>
    <hot-table
            :settings="hotSettings"
             :ref="`hotTableComponentDef${id}`"
             :formulas="formulasDef"
        ></hot-table>
</child>

now in Handsontable i have parent child rows where in parent row there is icons button for edit for that row details,
so when there is only one table(component) created it works fine but as soon as when i try to add new array object and try to create new table with help of v-for, Reference of edit button on 1st table(component) Handsontable get change to second table(component)
not sure what’s the issue i tried many thing but it seems something else with Handsontable

even other information that I’m giving to the component is accurate and shown in the component correctly , so it appears to be a hands-on problem alone.

#2

Hi @karanshinde8282

Thank you for contacting us. I’m not sure if I can see the issue in the code you sent. Can you please create a code demo representing the problem?

#3