THE SITUATION:

In my Vue app I need to show ads using the Google IMA sdk.
However it seems that the AdDisplayContainer it's stuck in an endless update loop.

JSFIDDLE:

I have recreated the issue on JsFiddle with a bare minimum example. You can check the error in the console.

https://jsfiddle.net/fraMussi/53f6vbjh/7/

As you can see there isn't much going on:

• I import the google IMA sdk
• I have basic markup for the video and ad container
• I setup the adDisplayContainer
• I have added a watcher to detect the issue

THE CODE:

this.adDisplayContainer = new google.ima.AdDisplayContainer(         this.$refs.adContainer, this.videoContent); 

THE ERROR:

It seems that it adDisplayContainer gets updated in a loop:

Error in nextTick: "RangeError: Maximum call stack size exceeded" <br> RangeError: Maximum call stack size exceeded 

In a production-like environment I get a similar error message:

InternalError: too much recursion 

THE QUESTION:

Do you know why is this happening and how to fix it?