v-for embeded inside a v-for

[Baldhor]

So, as many I'm using template element to implement v-for.
And I encountered the error "Cannot read properties of null (reading 'insertBefore')"

I searched for similar subject, and only found a very old and similar "issue" which has been closed (recently) because random ... vuejs/core#5657

For me, it's not a bug of Petite-Vue, even I would like to blam it for the hours spent on it (over 30 ...) ... it's just a limitation
So I share it here in the hope others do not waste so much time as I did ...

Remark: it seems this subject apply to Vue JS too ...

Usually it looks like:

<ul>
  <li>
    <span>...</span>
  </li>
  <template v-for='...' :key='...'>
    ...
  </template>
</ul>

In a specific use case, I had to do:

<ul>
  <li>
    <span>...</span>
  </li>
  <template v-for='...' :key='...'>
    ...
    <template v-for='...' :key='...'>
      ...
    </template>
  </template>
</ul>

=> note the embeded "template"

Well, it doesn't work for a simple reason:
=> A template element doesn't have a DOM representation, so the embeded template fail to refer to the parent DOM.

I would obtain the following error from Petite-Vue:

VM20:1 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertBefore')
    at ze (<anonymous>:1:10577)
    at De (<anonymous>:1:12721)
    at Ge (<anonymous>:1:13472)
    at De (<anonymous>:1:13423)
    at new nt (<anonymous>:1:15203)
    at $ (<anonymous>:1:11192)
    at W.fn (<anonymous>:1:11670)
    at W.run (<anonymous>:1:2309)
    at me (<anonymous>:1:6108)

In my specific case, the workaround I applied is:

<ul v-for='(value, index) ...' :key='...'>
  <li v-if='index === 0'>
    <span>...</span>
  </li>
  ...
  <template v-for='...' :key='...'>
    ...
  </template>
</ul>

=> removed first 'template', and using v-if on index to show the "< li >" only once

Conclusion:
=> We cannot use the template "trick" inside each other!