Where to store business logic?

Question

Vue.js

I started learning vue immediately from a combat example, and not from hello world: I decided to write a cellular automaton simulator (the game "Life", for example). I do not understand one architectural moment.
Let's say the screen is divided into 2 parts: the top settings toolbar and the rest of the area - in fact, the canvas of the game itself (webgl three-js).
As a result, we have 3 components:

<App>
   <Settings>
   <Grid>

1) It turns out that all the code and all the logic of the game should be in the Grid.vue file? Which will refer to Settings for parameters and actually render. Some kind of "divine object" turns out ... And somehow it is not included in the vue concept: after all, it is webgl, not dom.
2) I also thought to take out the logic separately from Vue. Create classes Cell.js, Game.js and more. Well then it turns out Grid is not strongly necessary.

Answer 1

Create classes Cell.js, Game.js

exactly. Vue does not prevent you from writing your own classes.
Create a folder, write your classes in it, then import them into templates and work.

It turns out that all the code and all the logic of the game should be in the Grid.vue file? Which will access Settings for parameters and actually render

- if you need to make the components communicate with each other, then it is best to use vuex, in which you change the values ​​from the Settings component, and Grid will look at these values ​​from vuex and do something. Thus, you will take out the project settings and be able to cling them from anywhere in the application, otherwise you will have noodles

Answer 2

Read about vuex . And everything can be done through modules.