title: Mutation observer not observing element when placed inside a function
body: <p>I'm trying to set the <code>liveChatAvailable</code> value to true and <code>isLoading</code> value to false once the cripClient element loads to the page.</p>
  <p>When the observer object is within a function the <code>if (crispClient)</code> code never runs.</p>
  <p>After some research, it seems that it might have something to do with the code needing to be asynchronous but I don't really know how to go about it so a push in the right direction would be great.</p>
  <p><em><strong>Update</strong>:</em>
  I made the mixin run the code on <code>mounted()</code> instead of doing it inside of the component to see if that would make a difference but it didn't.</p>
  <p><strong>LiveChatAvailability.js</strong></p>
  <pre><code>  export const LiveChatAvailability = {
      data() {
        return {
          isLoading: true,
          liveChatAvailable: false
        }
      },
    
      methods: {
        setLiveChatAvailability() {      
          
          const crispClient = document.querySelector('.crisp-client');
          const observer = new MutationObserver((mutations, obs) =&gt; {
            if (crispClient) {
    
              this.loading = false;
              this.liveChatAvailable = true;
  
              obs.disconnect();
              return;
            }
    
            observer.observe(document, {
              childList: true,
              subtree: true
            });
          });
        }
      }
    } 
  
  </code></pre>
  <p><strong>LiveChatButton.vue</strong></p>
  <pre><code>&lt;template&gt;
    &lt;button v-if=&quot;liveChatAvailable&quot; @click.prevent=&quot;liveChatTrigger&quot;&gt;Start a live chat now&lt;/button&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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']);
        }
      }
    },
  }
  &lt;/script&gt;
  </code></pre>