I use GLTFLoader to load model to my Vue2 app. I use common Three.js template. GLTFLoader is taken directly from Three.js docs. My example is very easy but even in this case I can't load the model. I have no idea what can be wrong with my code, I can't see any errors:

<template>
  <div id="viewport" ref="container"></div>
</template>


<script>
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

export default {
  name: 'Scene',

  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null
    }
  },
  methods: {
    init() {

        this.camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
        this.camera.position.z = 1;
        this.scene = new THREE.Scene();

        this.renderer = new THREE.WebGLRenderer({antialias: true});
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.$refs.container.appendChild(this.renderer.domElement);

        const loader = new GLTFLoader();
        loader.load("Avocado.glb", (glb) => {
            console.log(glb)
            this.scene.add(glb.scene);
            },
            function (xhr) {
            console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
            },
            function (error) {
            console.log("An error happened");
            }
        );
    },

    animate() {
        requestAnimationFrame(this.animate);
        this.renderer.render(this.scene, this.camera);
    }
  },
  mounted() {
      this.init();
      this.animate();
  }
}
</script>

Here is a reproducible example: https://codesandbox.io/s/vue-2-playground-forked-q6lchp?file=/src/components/Model.vue