Bug: double/multiple unnecessary re-renders vgg-multiline and vgg-area marks

[luucvanderzee]

To reproduce:

1. Add a console.log to the top of the renderSVG function in the Path.js mixin
2. Open the Areas.vue sandbox example and notice how the console.log shows up 6 times, rather than the expected 3 times.

I have already logged everything in the Path.js mixin I could think of, but I don't see any changes, so it is unclear why the re-rendering is happening.

I initially thought the problem was the updateBranch function, used in the transformation watcher, in Section.vue being called unnecessarily- I noticed it was called while the this.transformation it was watching didn't even change. So I tried to solve this by wrapping the update code in if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) { .. } to stop it from being triggered, which worked, but which still didn't solve the re-render bug. So it might have something to do with the things that are being watched in this.transformation in the Section, but I have logged all of them and I am not able to find any changes. Maybe there could be some really deep changes like inside of the $$dataInterface, but the watcher on this.transformation is not a deep watcher anyway, so I don't get why that would trigger updates. Also, in the Areas.vue example, there should be no changes to the $$dataInterface after the areas are rendered, so that wouldn't make sense either.

[luucvanderzee]

I encountered another similar bug, which is likely related to this one:

The scales() computed property keeps updating for no reason.
This behavior is especially problematic now that I am doing the mouse interaction, because keeps setting off a whole chain of reactions starting at scales, going up to transformation, leading eventually to calling createScale a lot of time every time the mouse moves a single pixel. The weird part? None of its dependencies are changing. The weirdest part: if you replace

<vgg-section
  :scale-x="[0, 1]"

with

<vgg-section
  :scale-x="someVar"

...

data () {
  return { someVar: [0, 1] }
}

the problem is fixed. I have tried to reproduce the error in codepen, but I am not able to. Debugger and console.logging is also not helping. Wth is going on here? Should we report this? But since I haven't been able to reproduce it outside of our library, how?

[GraceGSy]

Not sure if this is a cause or just a tangential point, but it seems that binding literal props of type Object and Array directly to a template causes unexpected re-renders?

The issue here