title: Access data inside mounted VueJS
body: <p>I'm trying to create simple app with Vuejs that will check length of title tag (px). </p>
  
  <p>Inside mounted I set the default value for title and run check length of default title tag but it return 0. When I change value of input, it work fine.</p>
  
  <p>Here is my code. Link: <a href="https://codepen.io/mrtienhp97/pen/LeOzGa" rel="noreferrer">https://codepen.io/mrtienhp97/pen/LeOzGa</a></p>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div id="app"&gt;
     &lt;input v-model="title" @input="titleCheck()"&gt;
  
    &lt;div id="title-preview"&gt;{{title}}&lt;/div&gt;
  
    &lt;div class="message"&gt;{{message}}&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#title-preview {
    display: inline-block;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>new Vue({
    el: '#app',
    data: {
      title: '',
      message: ''
    },
    mounted: function() {
      this.$nextTick(function () {
        this.title = "Default Title";
        var title_width = document.getElementById("title-preview").offsetWidth;
        this.message = title_width + 'px';
      });
    },
    methods: {
      titleCheck: function() {
        var title_width = document.getElementById("title-preview").offsetWidth;
        this.message = title_width + 'px';
      }
    }
  })
  </code></pre>
  
  <p>Can anyone help me correct it?</p>