title: How to access ref element that being conditionally rendered in v-if - Vue
body: <p>I have an element that being conditionally rendered with <code>v-if="isLogged"</code>, if a user is logged in:</p>
  
  <pre><code>&lt;div
    v-if="isLogged"
    class="chatBlock"
    ref="chat"
  &gt;&lt;/div&gt;
  </code></pre>
  
  <p>I'm trying to get scroll height of the <code>chat</code> reference in a <code>mounted ()</code> function - <code>this.$refs.logged.scrollHeight</code>, but it's not possible, because if a user is not logged in, then this <code>div</code> won't be rendered on a mounting stage, so even if a user logs in - it won't work, because mounted stage already passed.</p>
  
  <p>Is it possible to track element appearance in a DOM using <code>watch</code> method?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Added watcher, as Steven suggested below in a <code>mounted ()</code>:</p>
  
  <pre><code>this.$store.watch(
    (state) =&gt; {
      return this.$store.getters.isLogged
    },
    (newValue, oldValue) =&gt; {
      if (newValue) {
        this.chatHeight = this.$refs.chat.scrollHeight
      }
    }
  )
  </code></pre>