Three.js OBJLoader in Vue3

ObjectViewer.vue

<template>
  <div>
    <div ref="canvas" id="container"></div>
  </div>
</template>
<script>
import * as THREE from "three";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
var camera,
  scene,
  renderer,
  controls,
  stats,
  mesh = null;
export default {
  name: "ObjectViewer",
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
      controls: null,
      OBJobject: null,
      x: 0,
      y: 0,
      z: 0,
      loadingPercentageComplete: 0,
    };
  },
  methods: {
    init() {
      scene = new THREE.Scene();
      scene.add(new THREE.AxesHelper(5));
      const light = new THREE.PointLight();
      light.position.set(2.5, 7.5, 15);
      scene.add(light);
      camera = new THREE.PerspectiveCamera(100, 350 / 350, 1, 1000);
      camera.position.z = 750;
      renderer = new THREE.WebGLRenderer({ alpha: true });
      renderer.setSize(400, 400);
      renderer.setClearColor(0x000000, 0); // the default
      this.$refs["canvas"].appendChild(renderer.domElement);
      const objLoader = new OBJLoader();
      var OBJobject = null;
      objLoader.load(
        "/path/to/object/obj.obj",
        (object) => {
          console.log("object", object);
          this.OBJobject = object;
          scene.add(object);
        },
        (xhr) => {
          this.loading = true;
          this.loadingPercentageComplete = (xhr.loaded / xhr.total) * 100;
          if(this.loadingPercentageComplete === 100) {
              setTimeout(() => {
                  this.loading = false;
              }, 5000);
          }
          console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
        },
        (error) => {
          console.log(error);
        }
      );
      this.animate();
    },
    onWindowResize() {
      camera.aspect = 400 / 400;
      camera.updateProjectionMatrix();
      renderer.setSize(400, 400);
      this.render();
    },
    render() {
      renderer.render(scene, camera);
    },
    animate() {
      requestAnimationFrame(this.animate);
      this.render();
    },
  },
  watch: {
    imuPosition(val) {
      console.log("imuPosition", val);
      this.x = val.x;
      this.y = val.y;
      this.z = val.z;
      if (this.OBJobject) {
        this.OBJobject.rotation.x = this.x;
        this.OBJobject.rotation.y = this.y;
        this.OBJobject.rotation.z = this.z;
      }
    },
  },
  computed: {
    imuPosition() {
      return this.$store.getters["ros/getRosData"].imu_sub.angle;
    },
  },
  mounted() {
    this.init();
    this.animate();
  },
};
</script>