ThreeJs black screen in VueJs application - vue.js

Question

I have been studying some basics of Three.js into
a Vue.JS application.
I am following a tutorial and the code is the same as the original autor.
A cube geometry was added as a initial test, but my screen canvas goes black, and since i'm new to vuejs I can't find the error.
See some of the code below..
thank you all!
<template>
<div id="space">
<div id="container"></div>
</div>
</template>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default {
name: "space",
data() {
return {
scene: null,
camera: null,
renderer: null,
controls: null,
iR: null,
};
},
mounted() {
let that = this;
this.Awake();
window.addEventListener("resize", onWindowResize, false);
function onWindowResize() {
that.camera.aspect = window.innerWidth / window.innerHeight;
that.camera.updateProjectionMatrix();
that.renderer.setSize(window.innerWidth, window.innerHeight);
}
onWindowResize();
},
methods: {
Awake() {
let container = document.getElementById("container");
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color(0x222222);
this.camera = new THREE.PerspectiveCamera(
25,
window.clientWidth / window.clientHeight,
1,
100
);
this.camera.position.set(8, 4, 0);
this.iR = new THREE.Group();
this.iR = "Interactive Root";
this.scene.add(this.iR);
let light0 = new THREE.AmbientLight(0xfafafa, 0.25);
let light1 = new THREE.PointLight(0xfafafa, 0.4);
light1.position.set(200, 90, 40);
let light2 = new THREE.PointLight(0xfafafa, 0.4);
light2.position.set(200, 90, -40);
this.scene.add(light0);
this.scene.add(light1);
this.scene.add(light2);
let gridHelper = new THREE.GridHelper(
60,
150,
new THREE.Color(0x555555),
new THREE.Color(0x333333)
);
this.scene.add(gridHelper);
//mesh geometry to test
let geometry = new THREE.BoxGeometry(1, 1, 1);
let material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
let mesh = new THREE.Mesh(geometry, material);
this.scene.add(mesh);
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(this.renderer.domElement);
this.controls = new OrbitControls(this.camera, this.renderer.domElement);
this.controls.enableDamping = true;
this.controls.dampingFactor = 0.25;
this.controls.screenSpacePanning = false;
this.controls.maxDistance = 800;
this.controls.update();
this.Update();
this.GetGeoJson();
},
Update() {
requestAnimationFrame(this.Update);
this.renderer.render(this.scene, this.camera);
this.controls.update();
},
GetGeoJson() {
fetch("./assets/ufpe.geojson").then((res) => {
res.json().then((data) => {
console.log(data);
//this.LoadBuildings(data)
});
});
},
},
};
</script>
<style scoped>
</style>