Estoy tratando de establecer el valor de liveChatAvailable en verdadero y el valor de isLoading en falso una vez que el elemento cripClient se carga en la página.

Cuando el objeto observador está dentro de una función, el código if (crispClient) nunca se ejecuta.

Después de investigar un poco, parece que podría tener algo que ver con el código que necesita ser asincrónico, pero realmente no sé cómo hacerlo, por lo que un impulso en la dirección correcta sería genial.

Actualización : Hice que el mixin ejecutara el código mounted() en lugar de hacerlo dentro del componente para ver si eso marcaría la diferencia, pero no fue así.

LiveChatAvailability.js

 export const LiveChatAvailability = { data() { return { isLoading: true, liveChatAvailable: false } }, methods: { setLiveChatAvailability() { const crispClient = document.querySelector('.crisp-client'); const observer = new MutationObserver((mutations, obs) => { if (crispClient) { this.loading = false; this.liveChatAvailable = true; obs.disconnect(); return; } observer.observe(document, { childList: true, subtree: true }); }); } } }

LiveChatButton.vue

 <template> <button v-if="liveChatAvailable" @click.prevent="liveChatTrigger">Start a live chat now</button> </template> <script> import {LiveChatAvailability} from '../../../../../public_html/assets/src/js/Vue/Mixins/LiveChatAvailability'; export default { mixins: [ LiveChatAvailability ], created() { this.setLiveChatAvailability(); }, methods: { liveChatTrigger() { if (window.$crisp) { window.$crisp.push(['do', 'chat:open']); } } }, } </script>