How to implement <transition-group> inside a v-for loop? - vue.js

Question

There's one suggested answer on this, but the solution isn't working for me. I have a nested v-for and would like to animate the innermost li elements as they are removed or added by my computed statement. My current code looks like so:
<transition-group #before-enter="beforeEnter" #enter="enter" #leave="leave" tag="ul" v-if="computedProviders">
<li v-for="(letter, index) in computedProviders" :key="index">
<div>
<p>{{index.toUpperCase()}}</p>
</div>
<transition-group :letter="letter" tag="ul" class="list" #before-enter="beforeEnter" #enter="enter" #leave="leave">
<li v-for="provider in letter" :key="provider.last_name">
<div>
<a :href="provider.permalink">
{{provider.thumbnail}}
</a>
<div>
<h3>
<a :href="provider.permalink">
{{provider.last_name}}, {{provider.first_name}} <span>{{provider.suffix}}</span><br>
<p>{{provider.specialty}}</p>
</a>
</h3>
</div>
</div>
</li>
</transition-group>
</li>
</transition-group>
</div>
The outer transition-group works fine, but when I set up the inner one I get
ReferenceError: letter is not defined.
I tried adding :letter="letter" as suggested here, but it's still not working for me. Any suggestions? I'm happy to reformat the code if there's a way that makes better sense.
Edit: in response to a couple of the comments here, first of all, I'm injecting Vue into a PHP-based Wordpress template, so I'm not able to create separate components. I don't know if that's part of what's causing the issue or why some of you can run the code with no errors.
Here's a sample of the JSON this is iterating over:
{
a: [
{
first_name: 'John',
last_name: 'Apple',
suffix: 'DDS',
permalink: 'www.test.com',
thumbnail: '<img src="test.com" />',
specialty: 'Some specialty'
},
{
first_name: 'Jane',
last_name: 'Apple',
suffix: 'DDS',
permalink: 'www.test.com',
thumbnail: '<img src="test.com" />',
specialty: 'Some specialty'
}
],
d: [
{
first_name: 'John',
last_name: 'Doe',
suffix: 'DDS',
permalink: 'www.test.com',
thumbnail: '<img src="test.com" />',
specialty: 'Some specialty'
},
{
first_name: 'Jane',
last_name: 'Doe',
suffix: 'DDS',
permalink: 'www.test.com',
thumbnail: '<img src="test.com" />',
specialty: 'Some specialty'
}
]
}

Answer 1

One of the caveats with using in-DOM templates is that the browser parses the DOM before Vue gets to it. The browser doesn't know what <transition-group tag="ul"> is, so that just gets ignored. Instead, it sees an <li> inside another <li>. Since <li> elements normally cannot be nested, the browser hoists <li v-for="provider in letter" :key="provider.last_name"> outside its parent <li> that defines letter.
Removing Vue and inspecting the DOM will reveal the problem:
When Vue processes that template, it encounters letter, which is technically undeclared outside of the v-for, resulting in the error you're seeing.
Solution 1: <template> wrapper
If you need to use in-DOM templates, wrap the inner <transition-group> with a <template> so that the browser will ignore it:
<transition-group tag="ul">
<li v-for="(letter, index) in computedProviders" :key="index">
<template> 👈
<transition-group tag="ul">
<li v-for="provider in letter" :key="provider.last_name"></li>
</transition-group>
</template>
</li>
</transition-group>
demo 1
Solution 2: String templates
Move the template into a string (using the template option), which avoids the DOM parsing caveats:
new Vue({
template:
`<transition-group tag="ul">
<li v-for="(letter, index) in computedProviders" :key="index">
<transition-group tag="ul">
<li v-for="provider in letter" :key="provider.last_name"></li>
</transition-group>
</li>
</transition-group>`
//...
}).$mount('#providers')
demo 2

Answer 2

Don't really know what's causing the error, but try creating a new component that accepts letter as a prop and contains your inner <transition-group>. Then embed this new component in your root v-for.
It should give something like that:
<transition-group #before-enter="beforeEnter" #enter="enter" #leave="leave" tag="ul" v-if="computedProviders">
<li v-for="(letter, index) in computedProviders" :key="index">
<div>
<p>{{index.toUpperCase()}}</p>
</div>
<my-component :letter="letter" />
</li>
</transition-group>