SolarSys | Realistic Solar System simulation with three.js | Graphics library

I am trying to use an external js file in my .vue file but get error:

There are a few similar questions but none of the answers fix my issue. I am simulating a solar system using canvas. The animation function calls a function to update the positions and then these positions are shown on screen in the form of circles. I have tried not calling the function animate and simply drawing the bodies using the initial conditions and this works fine however when trying to draw them via the animate function nothing is drawn - no even the sun - even though the functions have been passed through.

Why are they not drawing on the canvas?

here is the code (i have removed the for loop which would draw all the planets to only draw the earth just for development purposes, i have also not copied in all the global variables at the top as they take up a lot of space):

zoom allows us to use a state action that only uses some state variables, in a context where more variables are actually defined.

I'm modelling a two body orbit using JavaScript and HTML canvas. I have a animation function which draws a circle which is the sun and a second circle at set co-ordinates which is the earth. I've transformed the co-ordinate system so the centre of the page is (0,0). I also have an unfinished leapfrog function which will eventually update the position and velocity each time.

My issue is that the second circle no longer shows when its in the animate function but the sun still shows. I think its something to do with the requestAnimationFrame() method but i'm really not to sure what to do about it.

this is the code for the animate function and also the end of the leapfrog function (values are returned which are used in the animate function) and the main function which calls the others: