Hot Reload often breaks Animation

[artm]

Context

I'm experimenting with vue-babylonjs as basis for a live visuals programming workflow. The idea is to run a development server (webpack-dev-server with vue-loader), visit the it once (in a while) with the browser, then edit the code, save and have hot reload update (parts of) the scene graph.

As this is probably not your intended workflow I wasn't expecting much to be working out of the box, but found it doing quite all right. One component that breaks though is Animation.

What happens is: I visit the page with a scene graph with an animation, the scene loads and animation animates. I then edit the animation node, e.g. change :duration value and save the file. Hot reload figures out what has changed, adjusts the Animation node and more often than not something will go wrong: either the animation runs but with corrupted state (e.g. rotation would seem to restart before the end value is reached) or the animation runs once but ends up throwing

TypeError: endKey is undefined ... chunk-vendors.js line 131 > eval:521:17
    _interpolate animation.js:511
    animate runtimeAnimation.js:510
    _animate animatable.js:361
    _animate animatable.js:409
    animate scene.js:3120
    render scene.js:3153
    setScene esm.js:18554
    _renderLoop engine.js:1371
    <anonymous> self-hosted:869

Reloading the page in the browser starts the scene graph with the new settings and without issues. I think the problem has to do with how Hot Reload attempts to update the DOM and how Vue-BabylonJS then virtually attempts to "propagate" the update to the scene graph. But I don't know enough about how vue and vue-babylonjs work underneath to understand what goes wrong exactly.

Minimally Reproducible Example

The minimal component I'm experiencing this problem with is here, and the whole project

To Reproduce
Steps to reproduce the behavior:

1. Start the development server with e.g. yarn serve
2. Visit http://localhost:8080/
3. Wait for the cube to start rotating
4. Edit the HotAnimationIssue.vue, changing duration to some other value
5. Wait for the exception to be raised (animation stops)

Expected behavior
Animation continues with new settings

Environment (please complete the following information):

• Device: Desktop
• OS: Linux
• Browser firefox
• Version 71

[BrainBacon]

Yeah, the Animation component is fairly naive and pretty much stock BabylonJS. There's a long way that it could go towards having better integration with the Vue lifecycle and unfortunately hot reload was one of the lower priority features while I was building it. I'm sure there's a decent way to make it work well for your use-case, but I'll have to put a bit of time into researching and implementing a fix.