Trustpilot widget (Trustbox) not loading correctly, only showing the fallback

Question

I am trying to implement various Trustbox widgets (Trustboxes) into a Vue Storefront shop. To understand the logic of the code below, there are two options: When a custom code snippet is provided in the backend, it should use that one, otherwise just use the default one. We try to lazy load everything for performance. To do so, we use the IntersectionObserver to add the bootstrap script to the website once scrolled into view. Once it is loaded (@load), we try the initialization of the widget code.

<!-- Trustpilot widget -->
        <template v-if="element.iframeType == 'trustpilot'">
            <script v-if="trustpilotScriptLoaded" src="https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" @load="scriptLoaded"></script>

            <!-- If custom code snippet is defined use that one -->
            <div v-if="element.html" ref="trustbox" v-html="element.html"></div>

            <!-- Default fallback code if custom snippet is not provided -->
            <template v-else>
                <div ref="trustbox" class="trustpilot-widget" data-locale="de-DE"
                    data-template-id="53aa8912dec7e10d38f59f36" data-businessunit-id="xxx"
                    data-style-height="140px" data-style-width="100%" data-theme="light" data-stars="4,5"
                    data-review-languages="de" data-font-family="Roboto" data-text-color="#4C4c4c">
                    <a href="https://de.trustpilot.com/review/xxx.de" target="_blank" rel="noopener">Trustpilot</a>
                </div>
            </template>
        </template>


...


methods: {
        scriptLoaded() {
            const trustbox = this.$refs.trustbox;
            if (trustbox && window.Trustpilot) {
                window.Trustpilot.loadFromElement(trustbox);
            }
        },

        lazyLoadTrustPilot() {
            if (this.element.iframeType === 'trustpilot') {
                if (!('IntersectionObserver' in window)) {
                    this.trustpilotScriptLoaded = true;
                    return;
                }
                const observer = new IntersectionObserver((entries, observer) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            this.trustpilotScriptLoaded = true;
                            observer.disconnect();
                        }
                    });
                });
                observer.observe(this.$refs.trustbox);
            }
        }
    },
    mounted() {
        this.lazyLoadTrustPilot();
    }

However, when this renders, regardless of whether it's the default or the custom script, the iframe being added by the script is just showing Trustbox fallback:

This is the iframe URL being generated (with the business unit id removed by me): https://widget.trustpilot.com/trustboxes/53aa8912dec7e10d38f59f36/index.html?templateId=53aa8912dec7e10d38f59f36&businessunitId=xxxx#locale=de-DE&styleHeight=140px&styleWidth=100%25&theme=light&stars=5&reviewLanguages=de&fontFamily=Roboto

Any help in getting this fixed to show the correct widget (e.g. carousel) would be greatly appreciated!