GLTFLoader problem

by GrassKnuckles

HTML

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        
        <div id="app">
            <section id="container">
              
            </section>
        </div>
        
        <script src="index.js"></script>
    </body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
}
#container {
    height: 95%;
    width: 100%;
}

Vue

import * as Three from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

var app = new Vue({ 
    el: '#app',
    data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null,
      light: null,
      light2: null,
      light3: null,
      light4: null,
      controls: null
    }
  },
  methods: {
    init: function() {
        this.scene = new Three.Scene();
        this.scene.background = new Three.Color(0xdddddd);

        this.camera = new Three.PerspectiveCamera( 3, container.clientWidth/container.clientHeight, 10, 10000 );
        this.camera.position.x = 1000;
        this.camera.position.y = 0;
        this.camera.position.z = 0;

        this.light = new Three.PointLight(0xc4c4c4,1.5);
        this.light.position.set(0,300,500);
        this.scene.add(this.light);
        this.light2 = new Three.PointLight(0xc4c4c4,1.5);
        this.light2.position.set(500,100,0);
        this.scene.add(this.light2);
        this.light3 = new Three.PointLight(0xc4c4c4,1.5);
        this.light3.position.set(0,100,-500);
        this.scene.add(this.light3);
        this.light4 = new Three.PointLight(0xc4c4c4,1.5);
        this.light4.position.set(-500,300,500);
        this.scene.add(this.light4);

        this.renderer = new Three.WebGLRenderer();
        this.renderer.setSize(container.clientWidth, container.clientHeight);
        container.appendChild(this.renderer.domElement)

        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
        this.controls.addEventListener('change', function() {this.renderer})
        this.controls.enableZoom = true
        this.controls.minPolarAngle = 1.1
        this.controls.maxPolarAngle = 1.9
        this.controls.update();

        let texture = new Three.TextureLoader().load( '../../src/assets/3d/model/awp/textures/dragon_lore.jpg' ); // load texture

       ...