Estoy trabajando con una aplicación Nuxt JS / Vue JS con páginas dinámicas. Mis páginas obtienen datos de una API remota que incluye HTML y JS que deben ejecutarse.

En mi contexto, tengo un montón de acordeones, que cuando se tocan deben abrir el contenido, por then que en el bloque de mi solicitud de axios estoy creando una etiqueta de secuencia de comandos en la página con el contenido:

 const string = "some JS from api" const injectTo = document.querySelector('[data-beam-injectes-interactivity]') const script = document.createElement('script') script.innerHTML = string injectTo.appendChild(script)

La cadena de JS inyectada es:

 function initDeviceGroupCollapses () { const buttons = document.querySelectorAll('[data-toggle="collapse"]') if (buttons) { for (const [index, button] of buttons.entries()) { if (button) { button.addEventListener('click', (event) => { event.stopPropagation() const target = event.target.dataset.target if (!target) { return } const collapse = document.querySelector(target) collapse.style.display = collapse.style.display == 'none' ? 'block' : 'none' }, false) } } } }

Sin embargo, el problema que tengo es que si el JS se inyecta en una página donde el HTML no existe inicialmente, los detectores de eventos ya no se activan en data-toggle="collapse" .

¿Cómo puedo asegurarme siempre de que el JS inyectado funcione?