transition-group with v-move class not working properly for elements with immediate watchers that calls $set

[bluwy]

Version

2.6.10

Reproduction link

https://codesandbox.io/s/vue-transition-group-bug-wnvwv

Steps to reproduce

1. Open codesandbox.
2. Click the "toggle transition" checkbox.

What is expected?

The enter transition should be animate smoothly.

What is actually happening?

In transition group with v-move class, the elements with immediate watchers that calls $set interrupts the enter transition causing it to "snap".

---

In the codesandbox repro, I provided workarounds to fix this problem.

I found this bug in this vuetify issue.

This happened on vuetify's 2.0.19 release where this code was added in to resolve issue #10115.

I'm not sure what is the direct cause as both the v-move class and the immediate watcher causes this issue.

[posva]

Duplicate of #7879

[bluwy]

This isn't a duplicate of the linked issue. That issue had problems with the v-show directive with transition groups whereas this issue only uses v-if, but v-if isn't really the factor causing this issue though.

I tested the linked issue's jsfiddle and changed v-show to v-if and it works as expected. So I'm guessing both aren't directly related.

[posva]

Right, I didn't see the Test component having specific behavior

[bluwy]

Given this is a very niche edgecase, and it's not blocking me anymore, and probably fixed in Vue 3, I'll close this for now.