Misunderstanding transitions? How do I trigger a transition when the bound data changes?

[ryexley]

With this commit I am attempting to add a transition to the <div class="passage-text" /> element. Nothing too fancy, just a simple opacity fade animation right now. Eventually would like to add a slide effect to it as well, but, for now I'm just trying to get it to work.

Based on my reading of the Transitions documentation, I was under the impression that the animation would apply whenever the bound content changes, which is currently happening on a set interval. At each interval, a function is run that just dispatches an action that updates vuex state in the app, which changes the value of a computed property on the component.

Currently, the transition works as expected when the component and it's content initially loads. But, when the interval triggers a state update and bound content changes, the transition doesn't get triggered. What do I need to do to trigger the update when the state and bound content changes? What am I missing?