Vue.js app is randomly blank on Issue view right context sidebar

Hi!
I have a simple cloud app, built with Vue.js. It uses the recommended structure for the index.html file (as pasted below).
The problem is that when opening the sidebar, it is entirely blank some times. Randomly. No apparant trigger for it, no console errors. Resizing the window manually does nothing. Only refreshing the entire page might work.

When inspecting the HTML, the app iframe is loaded fine, but its size is 0. Manually altering the width or height of the iframe does the trick and the app is perfectly usable.
Having a timeout inside the app with a window.AP.resize() on loop, makes the issue less apparent, but it is by no means a good nor solid solution, the app is blank anyways at random times.

Here is the app’s template:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://connect-cdn.atl-paas.net/all.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div class="ac-content">
      <div id="my-jira-app">
        <div id="app"></div>
      </div>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

And this is the section of the atlassian-connect.json

    "modules": {
        "webPanels": [
            {
                "url": "/index.html",
                "location": "atl.jira.view.issue.right.context",
                "layout": {
                    "width": "100%",
                    "height": "100%"
                },
                "weight": 1,
                "name": {
                    "value": "my jira app"
                },
                "key": "myjiraapp",
                "cacheable": true
            }
        ],

Any ideas on what am I missing for this to work properly?