Actualmente estoy trabajando en una aplicación de terceros, usando Vue para renderizar componentes.

La aplicación de terceros carga el componente dinámicamente después de inicializar y montar la aplicación Vue. Como resultado, solo pude ver el HTML del componente, pero no la plantilla que se pretendía representar. Es decir, podría ver algo como <my-component></my-component> cuando inspecciono, pero no la plantilla de myComponent .

Este es un ejemplo del desafío que menciono sobre https://jsfiddle.net/EmeraldCodeNinja/31jkmzgc/12/ . En este ejemplo, encontrará un botón, al hacer clic en el cual se agrega el componente vue al DOM usando JavaScript.

Sugiera una forma de hacer que esto funcione, para que pueda renderizar el componente agregado dinámicamente.

Nota: La intención no es hacer que JSFiddle funcione, es solo un ejemplo que simula el desafío al que me enfrento. Mi intención es hacer que el componente vue añadido dinámicamente se renderice.

Publicar el mismo HTML y JS desde JSFiddle

HTML

 <script src="https://unpkg.com/vue@3.2.37/dist/vue.global.js"></script> <div id="app"> <sample-button></sample-button> <div id="new-button-wrap"></div> </div> <script id="sample-button" type="text/html"> <button @click="addNew">Add Another Sample Button</button> </script>

JS

 const app = Vue.createApp(); app.component('sample-button', { template: '#sample-button', setup() { const addNew = function() { var div = document.createElement('div'); var sampleBtn = document.createElement('sample-button'); div.textContent = 'here a button should appear, but instead a tag is appearing' div.appendChild(sampleBtn) document.querySelector('#new-button-wrap').appendChild(div) } return { addNew } } }) app.mount('#app');