THREE.js with VUE.js

Questions
,
1

Hello everyone. I have a question: what is the best way to arrange the location of the three.js setup in the vue component? Can i make all in methods and call them at mounted() hook?

Example:

	data(){
		return {
			appMenu: false,
			object: null,
			camera: null, 
			scene: null, 
			renderer: null, 
			composer: null, 
			roughEaseSlow: null,
			canvas: null,
			raycaster: null,
			controls: null,
			APP_WIDTH: null,
			APP_HEIGHT: null,
			geometryPlane: null,
			size: 120,
			uniforms: {
				time: {type: 'f', value: 0.0},
				koeff: {type: 'f', value: 0.0},
				mouse: {type: 'vec2', value: new THREE.Vector2(35,35)}
			}
		}
	},		
           mounted(){

		this.canvas = this.$refs.canvasWorks;
		this.APP_WIDTH = window.innerWidth;
		this.APP_HEIGHT = window.innerHeight;
		this.initWebGl();

	},
		methods: {
		 onResize() {

			this.renderer.setSize(window.innerWidth, window.innerHeight);
			this.composer.setSize(window.innerWidth, window.innerHeight);
			this.camera.aspect = (window.innerWidth / window.innerHeight);
			this.camera.updateProjectionMatrix();

		},

		createRenderer() {

			this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas});
			this.renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);
			this.renderer.setSize(this.APP_WIDTH, this.APP_HEIGHT);
			this.renderer.setClearColor(0x000000, 1);


		},
		initWebGl(){

			this.createRenderer();
			this.createCamera();
			this.createScene();
			this.raycaster = new THREE.Raycaster();

			this.object = new THREE.Object3D();
			this.object.position.x = 0;
			this.controls = new OrbitControls(this.camera, document.getElementById('works-canvas--pg')); 
			this.scene.add(this.camera);
			//this.scene.fog = new THREE.Fog( 0x4360ab, 10,140 );
			
			const skyColor = 0xB1E1FF;
			const groundColor = 0xB97A20;
			const intensity = 2;
			const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);

			light.position.x = 0;
			light.position.y = 180;
			light.position.z = 0;

			this.scene.add(light);
			this.scene.add(this.object);

			this.geometryPlane = new THREE.Geometry();
			this.geometryPlane.computeFaceNormals();
			this.geometryPlane.computeVertexNormals();

			let material = new THREE.ShaderMaterial({
				//wireframe: true,
				extensions: {
					derivatives: '#extension GL_OES_standard_derivatives : enable',
				},
				//uniforms: this.uniforms,
				vertexShader: document.getElementById('vertexShader').textContent,
				fragmentShader: document.getElementById('fragmentShader').textContent
				// ,
				// side: THREE.DoubleSide
				// transparent: true
			});
  .... ETC