renamed canvas component (again) and fixed some issues

src/App.vue

@@ -3,19 +3,20 @@
     <h1 id="main-title">Cellular Automata Explorer</h1>
     <div id="container">
       <MainMenu />
-      <CanvasBoard />
+      <Board />
     </div>
   </div>
 </template>
 
 <script>
 import MainMenu from "./components/MainMenu.vue";
-import CanvasBoard from "./components/CanvasBoard.vue";
+import Board from "./components/Board.vue";
 
-export const App = {
+export default {
+  name: "App",
   components: {
     MainMenu,
-    CanvasBoard,
+    Board,
   },
 };
 </script>
@@ -26,7 +27,7 @@ export const App = {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
+   /* color: #2c3e50; */
 }
 
 * {

src/components/Board.vue

@@ -1,11 +1,12 @@
 <template>
   <main id="mainContent">
-    <CanvasBoard
+    <canvas
       id="canvas-board"
       ref="canvas-board"
       :width="canvasWidth"
       :height="canvasHeight"
-    />
+    >
+    </canvas>
   </main>
 </template>
 <script>
@@ -47,28 +48,13 @@ export default {
     },
   },
   mounted() {
-    this.canvas = this.$refs["canvas"];
+    this.canvas = document.getElementById("canvas-board")
     this.ctx = this.canvas.getContext("2d");
     this.$store.commit("setCanvasWidth", this.canvas.parentElement.clientWidth);
     this.$store.commit(
     "setCanvasHeight",
       this.canvas.parentElement.clientHeight
     );
-    this.$root.$on("draw1d", () => {
-      this.draw1d();
-    });
-    this.$root.$on("draw2dNew", () => {
-      this.draw2dNew();
-    });
-    this.$root.$on("draw2dLast", () => {
-      this.draw2dLast();
-    });
-    this.$root.$on("reset", () => {
-      this.reset();
-    });
-    this.$root.$on("stop", () => {
-      this.stop();
-    });
   },
   methods: {
     drawCanvas(board) {