feat: better vue structure

examples/web/index.ts

 import { createApp } from "vue";
-import App from "./vue/app.vue";
+import Boytacean from "./vue/app.vue";
 import { default as _wasm, GameBoy, PadKey, PpuMode } from "./lib/boytacean.js";
 import info from "./package.json";
 
+console.info(Boytacean);
+
 const PIXEL_UNSET_COLOR = 0x1b1a17ff;
 
 const LOGIC_HZ = 600;
@@ -1101,8 +1103,7 @@ const wasm = async () => {
 (async () => {
     (globalThis as any).__VUE_OPTIONS_API__ = true;
     (globalThis as any).__VUE_PROD_DEVTOOLS__ = false;
-
-    createApp(App).mount("#app");
+    createApp(Boytacean).mount("#app");
 
     const emulator = new Emulator();
     await emulator.main();

examples/web/vue/app.vue

 <template>
-    <div v-bind:class="'hello'" v-on:click="() => count++">Hello This {{ name }} {{ count}}!</div>
+    <div v-bind:class="'hello'" v-on:click="() => count++">Hello {{ name }} {{ count}}!</div>
 </template>
 
 <style scoped>
@@ -10,7 +10,7 @@
 </style>
 
 <script>
-export const App = {
+export const Boytacean = {
     data() {
         return {
             name: "Vue",
@@ -19,5 +19,5 @@ export const App = {
     }
 };
 
-export default App;
+export default Boytacean;
 </script>

examples/web/vue/components/index.ts

+import { App } from "vue";
+
+import { Button } from "./button/button.vue";
+
+const install = (Vue: App) => {
+    Vue.component("vue", Button);
+};
+
+export {
+    Button
+};
+
+export default install;

examples/web/vue/index.ts

+import { App } from "vue";
+
+import Components from "./components";
+
+const install = (Vue: App) => {
+    Vue.use(Components);
+};
+
+export * from "./components";
+export { Boytacean } from "./app.vue";
+
+export default install;