Rendering Three.JS scene in a Vue component - vue.js

Question

I'm trying to make a Vue app where one component has to load a 3D model that I want to modify using a user interface later on. I've been doing some research on how to do this but anything I find is either from older versions of Vue or just does not work.
I tried loading a three scene in my component, there are no errors, but there is also nothing showing up here is my component's code:
const viewPort = Vue.ref(null);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
mounted(){
const renderer = new THREE.WebGLRenderer({
//render in canvas
canvas: viewPort.value
});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//import donut glb
let donut;
const loader = new THREE.GLTFLoader();
loader.load('/bignut.glb', (gltf) => {
donut = gltf.scene;
donut.scale.set(40,40,40);
scene.add(donut);
});
}
body{
background-color: red;
}
<template>
<canvas ref="viewPort">
</canvas>
<h1>test</h1>
</template>
<script src="https://cdn.jsdelivr.net/npm/three#0.122.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three#0.122.0/examples/js/controls/OrbitControls.min.js"></script>
<script src="https://unpkg.com/three#0.122.0/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://unpkg.com/vue#3"></script>