Vue 3 <ais-dynamic-widgets> does not work with child v-for <ais-panel>s

[jhillegas1]

🐛 Current behavior

If an <ais-dynamic-widgets> component is used with an array of children <ais-panel v-for="item in someArray">, the components do not render.

This worked as expected in Vue2, but does not work in Vue3

🔍 Steps to reproduce

Given the following example array

const sampleData = [{
  attribute: 'specifications.power-source',
  label: 'Power Source',
},
{
  attribute: 'specifications.blowing-force',
  label: 'Blowing Force',
}]

The following sample template will not render in Vue3, however, it will render in Vue2.

<!--[ais-instant-search boiler plate wrapper removed for brevity]-->
<ais-dynamic-widgets>
  <ais-panel v-for="(item,index) in sampleData" :key="index">
    <ais-refinement-list  :attribute="item.attribute" />
  </ais-panel>
</ais-dynamic-widgets>

If you remove the v-for from consideration and directly access the array index, the dynamic components will render as expected.

<ais-dynamic-widgets>
  <ais-panel>
    <ais-refinement-list  :attribute="sampleData[0].attribute" />
  </ais-panel>
  <ais-panel>
    <ais-refinement-list  :attribute="sampleData[1].attribute" />
  </ais-panel>
</ais-dynamic-widgets>

Live reproduction

None

💭 Expected behavior

ais-dynamic-widgets should behave the same way as it did in Vue 2, with children rendering properly with the use of v-for

Package version

vue-instantsearch 4.16.1

Operating system

No response

Browser

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Haroenv]

I wonder if this is related to the traversing of the children. Do you mind adding an (unused) prop :attribute to the ais-panel directly? If that is the problem, it likely means that the entire looping context is seen as a single child

[jhillegas1]

The following made no difference and did not work.

<ais-dynamic-widgets>
  <ais-panel v-for="(item,index) in sampleData" :key="index" :attribute="item.attribute">
    <ais-refinement-list  :attribute="item.attribute" />
  </ais-panel>
</ais-dynamic-widgets>

I also suspect it is related to the iteration of the children but have not been able to confirm yet.