title: How to prevent VueJs to update data earlier than DOM completely mounts itself
body: <pre class="lang-vue prettyprint-override"><code>export default {
      data() {
          return {
              channels: channelz.Root.Channels.Channel,
              currentIndex: 1,
              columnNumber: 9,
              rowNumber: 7,
              windows: {
                  width: 0,
                  height: 0
              }
          };
      },
      mounted() {
          window.addEventListener('resize', this.handleResize);
          window.innerWidth &lt; 1200 ? this.handleResize() : console.log("Window size hasn't changed!");
      },
      destroyed() {
          window.removeEventListener('resize', this.handleResize);
      },
      methods: {
          handleResize() {
              this.windows.width = window.innerWidth;
              this.windows.height = window.innerHeight;
              this.checkAndChangeColumnRow();
              //this.checkRowNumber();
          },
          checkAndChangeColumnRow() {
              var calcCol = 0;
              for (var i = 1; i &lt; this.channels.length; i++) {
                  calcCol++;
                  if (this.$refs[i][0]['y'] != this.$refs[i + 1][0]['y']) {
                      break;
                  }
              }
              this.columnNumber = this.columnNumber !== calcCol ? calcCol : this.columnNumber;
              this.rowNumber = (this.channels.length - 1) % this.columnNumber == 0 ? parseInt((this.channels.length - 1) / this.columnNumber) : parseInt(this.channels.length / this.columnNumber) + 1;
          }
      }
  }
  </code></pre>
  
  <p>I am trying to manipulate and find column and row number of the items in the flexbox. I am trying to find it out by the properties of this.$refs properties as you can see in the code above. Unfortunately, checkAndChangeColumnRow function updates it earlier than items gets completely rendered.</p>
  
  <p>Edit: Resolved the issue by adding an event listener in mounted. It calls the same function twice in a row and it somewhat gives the correct output in the second callback.</p>
  
  <pre><code> mounted() {
       window.addEventListener('resize', this.handleResize);
       window.addEventListener('load',this.checkAndChangeColumnRow);
       window.innerWidth &lt; 1200 ? (console.log("Width çok azmış yaa"),this.handleResize()) : console.log("Window size hasn't changed!");
    },
    destroyed() {
      window.removeEventListener('resize', this.handleResize);
      window.removeEventListener('load',(this.checkAndChangeColumnRow,console.log("Event has been detached.")));
    },
  </code></pre>