title: VueJS - How to scroll bottom when data changes
body: <p>In my component, I got a messages array. </p>
  
  <pre><code>data: function () {
          return {
              messages: [],
              first_load: false
              ...
          }
  </code></pre>
  
  <p>This messages array get initially populated with an Ajax call after the creation of my component. After the data comes from the server I just push it into my messages variable, it paints all messages in the UI amazingly but after it gets pushed I try to scroll bottom my UI so the user watches only the latest content.</p>
  
  <pre><code>data.body.data.messages.map((message) =&gt; {
      this.messages.push(message)
  }
  this.scroll_bottom()
  </code></pre>
  
  <p>I noticed that performing a simple javascript scroll bottom line just after pushing my data won't work as the UI gets refreshed asynchronously (When i .push to my array it won't execute next line before syncing the UI), so I ended up adding a timeout and then scrolling bottom, but this is super shameful I think.</p>
  
  <p>My hack:</p>
  
  <pre><code>watch: {
      messages:{
          handler: function (val, oldVal) {
              if (!this.first_load) {
                  this.first_load = true
                  setTimeout(() =&gt; {
                      this.scroll_bottom()
                  }, 1000);
              }
          },
          deep: true
      }
  }
  </code></pre>
  
  <p>Any ideas on how to leverage this?
  Thanks!</p>