[Vuejs]-Adding Three.JS 'OrbitControls' Causes Black-Screen in VueJS application?

Agree with the previous answer, import orbit controls as follows – worked for me:

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

But you have some other errors that are breaking it:

As you are working with a VueComponent object, you need to modify your camera and renderer variables that you pass in to the OrbitControls constructor with the this reference, so they are referring to the variables attached to your component,

So you need to replace

var controls = new OrbitControls(camera, renderer.domElement);

with

this.controls = new OrbitControls(this.camera, this.renderer.domElement);

and move that line below the line where you declare the this.renderer

so you end up with:

this.renderer = new Three.WebGLRenderer({antialias: true});

this.controls = new OrbitControls(this.camera, this.renderer.domElement);

then similarly in your animate() function,

replace controls.update() with this.controls.update()

you should import OrbitControl as below:

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

First, check for errors in the browser console.
The first thing that pops out to me is the second argument you are sending to the OrbitControls constructor is renderer.domElement, but the renderer object is created after this line.
Try moving the OrbitControls call to after the renderer is created.
ie.

this.renderer = new Three.WebGLRenderer({antialias: true});
this.renderer.setSize(container.clientWidth, container.clientHeight);
var controls = new OrbitControls(camera, renderer.domElement); /*<-- moved to after renderer is created*/

I was experimenting with Three.js and Vue a couple of years back, You may find it interesting or helpful