title: Vue.js can't find element using querySelector
body: <p>I am trying to create a chat style form. So a user inputs their data and then uses the button within my template with the class of <code>continue-btn</code>.</p>
  
  <p>As you can see when the <code>continue-btn</code> is pressed it uses the <code>nextStep</code> method which adds 1 to the <code>counter</code> data property.</p>
  
  <p>Within my template I then use <code>v-if="counter &gt;= 1"</code> to display the next section of the chat dialog and input field.</p>
  
  <p>I am then trying to use scrollTop to automatically scroll the page to the new section with the id of <code>#conversation__tram-1</code>. I originally tried running this block of code just after the <code>counter</code> had been given a value of 1:</p>
  
  <pre><code>const container = this.$el.querySelector("#conversation__tram-" + this.counter);
  container.scrollTop = container.scrollHeight;
  </code></pre>
  
  <p>This didn't work though because I'm guessing the <code>#conversation__tram-1</code> element hadn't been added to the DOM yet.</p>
  
  <p>So for the sake of testing I tried wrapping it in a timeout function:</p>
  
  <pre><code>  setTimeout(function(){
      const container = this.$el.querySelector("#conversation__tram-" + this.counter);
      container.scrollTop = container.scrollHeight;
    }, 3000);
  </code></pre>
  
  <p>However I am left with this error when trying this:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'querySelector' of undefined
  </code></pre>
  
  <p>Here is my whole single vue file:</p>
  
  <pre><code>&lt;template&gt;
  
      &lt;div id="conversation-app"&gt;
        &lt;!-- &lt;div v-for="item in items"&gt;
          {{ item.text }}
        &lt;/div&gt; --&gt;
        &lt;div class="conversation__track"&gt;
          &lt;div id="conversation__tram-0"&gt;
            &lt;div class="conversation__item agent"&gt;
              &lt;img src="/assets/cdn.annuityadvicecentre.dev/images/theme-f/michael-chat-agent.jpg" class="conversation__item-prof-img" alt="Michael Chat Agent" /&gt;
              &lt;div class="conversation__item-content"&gt;
                &lt;p&gt;
                  Hello my name is {{ agent }}, we'll compare the whole annuity market to bring you back the best annuity rates from the top providers for you. Let's get started, what's your name?
                &lt;/p&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="conversation__item customer" id="title-fullname"&gt;
              &lt;div class="conversation__item-content"&gt;
                &lt;p&gt;
                  Hi {{ agent }}, my name is...
                &lt;/p&gt;
                &lt;div class="row"&gt;
                  &lt;div class="col-4"&gt;
                    &lt;select id="title" class="field-title" name="payload[title]"&gt;&lt;option value="mr"&gt;Mr&lt;/option&gt;&lt;option value="mrs"&gt;Mrs&lt;/option&gt;&lt;option value="miss"&gt;Miss&lt;/option&gt;&lt;option value="ms"&gt;Ms&lt;/option&gt;&lt;/select&gt;
                  &lt;/div&gt;
                  &lt;div class="col-8"&gt;
                    &lt;input v-model="customerName" id="full_name" class="field-full_name" name="payload[full_name]" type="text"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;transition name="fade"&gt;
            &lt;div id="conversation__tram-1" v-if="counter &gt;= 1"&gt;
              &lt;div class="conversation__item agent"&gt;
                &lt;img src="/assets/cdn.annuityadvicecentre.dev/images/theme-f/michael-chat-agent.jpg" class="conversation__item-prof-img" alt="Michael Chat Agent" /&gt;
                &lt;div class="conversation__item-content"&gt;
                  &lt;p&gt;
                    Thanks {{ firstName }}, nice to meet you. To process your instant quote please can I have your Pension Value?
                  &lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="conversation__item customer"&gt;
                &lt;div class="conversation__item-content"&gt;
                  &lt;p&gt;
                    Sure, my pension value is...
                  &lt;/p&gt;
                  &lt;input id="pension_value" class="field-pension_value" placeholder="£" pattern="\d*" name="payload[pension_value]" type="number"&gt;
                  &lt;div class="error-wrap error_pension_value is-hidden" data-format="&lt;div class=&amp;quot;error-text&amp;quot;&gt;:message&lt;/div&gt;"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/transition&gt;
          &lt;div id="conversation__buttons"&gt;
            &lt;button type="button" class="continue-btn"
            v-on:click="nextStep"
            &gt;Continue&amp;nbsp;&lt;i class="fa fa-chevron-right" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'conversation-app',
    data () {
      return {
        agent: 'Brick',
        counter: 0,
        customerName: '',
      }
    },
    methods: {
      nextStep: function() {
        this.counter += 1;
        setTimeout(function(){
          const container = this.$el.querySelector("#conversation__tram-" + this.counter);
          container.scrollTop = container.scrollHeight;
        }, 3000);
  
      },
    },
    computed: {
      firstName() {
        return this.customerName.split(' ')[0];
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Any idea why this isn't working? Thanks.</p>