title: Window.resize or document.resize which works & which doesn't? VueJS
body: <p>I am using <code>Vuetable</code> and its awesome.</p>
  
  <p>I am trying to create a top horizontal scroll, which I have done and its working fine. But I need to assign some events on the <code>window.resize</code>.</p>
  
  <p>I created a component such as</p>
  
  <pre><code>&lt;template&gt;
  &lt;div class="top-scrollbar"&gt;
    &lt;div class="top-horizontal-scroll"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;style scoped&gt;
  .top-scrollbar {
    width: 100%;
    height: 20px;
    overflow-x: scroll;
    overflow-y: hidden;
    margin-left: 14px;
  
    .top-horizontal-scroll {
      height: 20px;
    }
  }
  &lt;/style&gt;
  
  &lt;script&gt;
  export default {
    mounted() {
      document.querySelector("div.top-scrollbar").addEventListener('scroll', this.handleScroll);
      document.querySelector("div.vuetable-body-wrapper").addEventListener('scroll', this.tableScroll);
    },
    methods: {
      handleScroll () {
        document.querySelector("div.vuetable-body-wrapper").scrollLeft = document.querySelector("div.top-scrollbar").scrollLeft
      },
  
      tableScroll() {
        document.querySelector("div.top-scrollbar").scrollLeft = document.querySelector("div.vuetable-body-wrapper").scrollLeft
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I am calling it above the table such as <code>&lt;v-horizontal-scroll /&gt;</code></p>
  
  <p>I created a mixin as</p>
  
  <pre><code>Vue.mixin({
    methods: {
      setScrollBar: () =&gt; {
        let tableWidth = document.querySelector("table.vuetable").offsetWidth;
        let tableWrapper = document.querySelector("div.vuetable-body-wrapper").offsetWidth;
  
        document.querySelector("div.top-horizontal-scroll").style.width = tableWidth + "px";
        document.querySelector("div.top-scrollbar").style.width = tableWrapper + "px"
      }
    }
  })
  </code></pre>
  
  <p>And I am calling it when the user component on which <code>Vuetable</code> is being created </p>
  
  <pre><code>  beforeUpdate() {
      document.addEventListener("resize", this.setScrollBar());
    },
  
    mounted() {
      this.$nextTick(function() {
        window.addEventListener('resize', this.setScrollBar);
        this.setScrollBar()
      });
    },
  </code></pre>
  
  <p>I want to understand how this resizing event working.</p>
  
  <p>If I change even a single thing in the above code. I am starting to have issues.</p>
  
  <p>Either it doesn't set the width of scroll main div correctly or even <code>this.setScrollBar</code> don't work on resizing.</p>
  
  <p>I am not clear what is the logic behind this and how it is working?</p>