How do You Correctly Import Three.js Modules in a Vue Project?

I want to use three.js to display a gltf file. In order to do that I have to import the GLTFLoader module from the three.js node package.

According to the documentation the way to achieve this is by importing it like this:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

And this line does not give me any errors. If I change the path in any way the console tells me that they can't find the module, so I know for sure that it is finding a module the way it's written right now.

However, when I go on to invoke the loader like the documentation says using this line:

var loader = new THREE.GLTFLoader();

I get this error:

GLTFLoader is not a constructor

What am I doing wrong?

I tried multiple ways of importing the loader without any success and every thread I can find seems to use the same way of importing it without getting the same errors. Here's the relevant code in context.

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

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

export default {
  name: 'ThreeTest',
  data() {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null
    }
  },
  methods: {
    init: function() {
        var loader = new THREE.GLTFLoader();

        loader.load( 'assets/Models/eames_lounge_chair/scene.gltf', function ( gltf ) {

            scene.add( gltf.scene );

        }, undefined, function ( error ) {

            console.error( error );

        } );

    },
    animate: function() {

    },
    onWindowResize: function() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );
    }
  },
  mounted() {

        this.init();
        this.animate();
  }
}
</script>

<style scoped>
    #container {
        width: 10em;
        height: 10em;
    }
</style>