title: eventListener 'resize' doesnt change the value of a data() variable in Vue.js
body: <p><strong>Scenario:</strong> 
  I have a div with the ID 'slider' and i have to store the reactive value of its offsetWidth inside a variable on the data function of the component.</p>
  
  <p>So i made something like this:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="slider"&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'Slider',
    mounted() {
      window.addEventListener('resize', function () {
        this.sliderWidth = document.getElementById('slider').offsetWidth;
      });
    },
    data() {
      return {
        sliderWidth: 0,
      };
    },
    methods: {
    },
  };
  &lt;/script&gt;
  </code></pre>
  
  <p>and then i added a method to see the current sliderWidth value</p>
  
  <pre><code>methods: {
     callwidth() {
      console.log(this.sliderWidth);
     } 
    },
  </code></pre>
  
  <p>and added that method to the @click event on the div:</p>
  
  <pre><code>&lt;div id="slider" @click="callWidth"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but then something strange started to happen, when i clicked on the slider after resizing the window its value was always 0.</p>
  
  <p>so i added a console log on the event listener like this:</p>
  
  <pre><code>  mounted() {
      window.addEventListener('resize', function () {
        this.sliderWidth = document.getElementById('slider').offsetWidth;
        console.log(this.sliderWidth)
      });
    },
  </code></pre>
  
  <p>and when i resize the windows, it throws a new value on the console log of the eventlistener every time, but if i click on the div, the console.log of the callWidth function throws 0, why is that?</p>