threeJS Nuxt, import syntax in head to resolve error (cannot use import statement outside a module, missing stack frame) - vue.js

Question

I am trying to use ThreeJS in my NuxtJS app. I am trying to resolve an error while deploying to local host.
The issue is with the following two lines:
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
which throws a syntax error "cannot use import statement outside a module". "node:vm - Missing stack frames".
The full code in the script tag is attached below.
The problem will likely resolve if I adapt the code into the head section of export default, but I cannot find the appropriate syntax for this.
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export default {
data() {
return {
camera: new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000),
scene: new THREE.Scene(),
renderer: new THREE.WebGLRenderer({
canvas: document.querySelector('#canvas')
}),
mesh: null
}
},
head() {
return {
script: [
{
async: true,
type: 'module',
src: 'https://unpkg.com/es-module-shims#1.3.6/dist/es-module-shims.js'
},
{
type: 'module',
imports: {
type: 'module',
three: 'https://unpkg.com/three#<version>/build/three.module.js'
}
},
]
}
},
mounted() {
this.init;
},
methods: {
init() {
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.camera.position.setZ(30);
this.renderer.render(this.scene, this.camera);
// add shapes//geometry //materials //mesh
const geometry = new THREE.PlaneGeometry(10, 3, 16, 100)
const material = new THREE.MeshBasicMaterial({ color: 0xFF6347, wireframe: true });
const plane = new THREE.Mesh(geometry, material);
const controls = new OrbitControls(this.camera, this.renderer.domElement);
// renderer.render( scene, camera);
// render
this.scene.add(plane)
// lighting
const pointLight = new THREE.PointLight(0xFFFFFF)
pointLight.position.set(5, 5, 5)
// pointLight.position.set(20,20,20)
const ambientLight = new THREE.AmbientLight(0xFFFFFF);
this.scene.add(pointLight, ambientLight)
const lightHelper = new THREE.PointLightHelper(pointLight)
const gridHelper = new THREE.GridHelper(200, 50);
this.scene.add(lightHelper, gridHelper)
// animate
function animate() {
requestAnimationFrame(animate);
plane.rotation.x += 0.01;
plane.rotation.y += 0.005;
plane.rotation.z += 0.01;
controls.update();
this.renderer.render(this.scene, this.camera);
}
animate()
}
},
}
</script>