Trouble exporting and Importing Vanilla Javascript Class Object into Vue.js app, element not defined error

Question

I am currently working on a game project. The main structure will be done using game objects based on javascript classes with constructors. I have done it in plain Javascript and Html, but when trying to port it to Vue.js I have problems importing and using objects. The import is working fine, the problem is that I have a property this.element = element.config and error says element is not defined (though in simple javascript it is working fine). Hope you can explain some of that stuff and suggest me changes to make it work.

Here is my Javascript class object:

 export default class World { constructor(config) { this.element = element.config this.canvas = this.element.getElementById('game__canvas') this.ctx = this.canvas.getContext('2d') } init() { console.log('Hi, It is working!', this) } }

Here is the code that tries to launch it in my Vie.js app:

 import World from './World' // First I import it like that from an external file mounted() { this.gameUpdate() }, methods: { updateGame() { const world = new World({ element: document.querySelector('#game__container') }) world.init() } }, // gives me Uncaught (in promise) ReferenceError: element is not defined

Answer 1

are you sure is

this.element = element.config

and not

this.element = config.element

?