Why my window resize event listener doesn't work? Using Three.js and Vuetify.js

I am putting a three.js renderer inside of a , using vuetify.js framework. What I would like my code to do is to change the div element dimensions whenever the window is resized.

I am putting a three.js renderer inside of a , using vuetify.js framework. What I would like my code to do is to change the div element dimensions whenever the window is resized.

This is part of my project and I omitted unnecessary code blocks, so don't mind the not used variables :)

<style scoped>
.map__three {
  position: absolute;
  bottom: 60px;
  left: 0px;
}
</style>

<template>
<div class="flex fill-height wrap">
<v-btn></v-btn>
<div id="map" class="flex fill-height wrap" v-on:dblclick="addNewPoi3d"></div>
</div>
</template>

<script>

export default {
name: 'ThreeTest',
data() {
return {
scene: null,
renderer: null,
camera: null,
mouse: null,
mousePosition: new THREE.Vector2(),
canvasPosition: null,
rayCaster: new THREE.Raycaster(),
mapWidth: null,
mapHeight: null,
mapDimensions: null
};
},

methods: {
init() {
let map = document.getElementById('map');
this.mapDimensions = map.getBoundingClientRect();
this.mapWidth = this.mapDimensions.width;
this.mapHeight = this.mapDimensions.height;
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color( 0xf0f0f0 );

  this.camera = new THREE.PerspectiveCamera(
    75,
    this.mapWidth/this.mapHeight,
    0.1,
    1000,
  );
  this.camera.position.z = 3;


  this.renderer = new THREE.WebGLRenderer();
  this.renderer.setSize(this.mapWidth, this.mapHeight);
  map.appendChild(this.renderer.domElement);



  // EVENT LISTENERS:
  window.addEventListener('resize', this.onWindowResize, false);
},


onWindowResize()  {
    this.camera.aspect = this.mapWidth / this.mapHeight;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize(this.mapWidth, this.mapHeight);
},



animate() {
  requestAnimationFrame(this.animate);
  this.render();
},
render() {
  this.renderer.render(this.scene, this.camera);
},

},

mounted() {
this.init();
this.animate();
}
};
</script>

EXPECTED: it should resize the dimensions of the scene and camera aspect ratio I've loaded in.

WHAT IT DOES: none of that :D It pertains the same size of the scene and camera.

What are the differences between the various JavaScript frameworks? E.g. Vue.js, Angular.js, React.js

What are the differences? Do they each have specific use contexts?

What are the differences? Do they each have specific use contexts?