updated to vue3

initial work on more reactive EventSource wrapper

frontend/src/views/Home.vue

@@ -1,61 +1,3 @@
 <template>
-  <div class="home">
-    <Connection v-bind:active="active" v-bind:channel="currentChannel" />
-    <HelloWorld v-bind:msg="message" />
-    <div>
-      Credits: {{ credits }}
-    </div>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from "@/components/HelloWorld.vue";
-import Connection from "@/components/Connection.vue";
-import eventSource from "@/eventsource";
-
-var connect = function (channel) {
-  if (channel != "undefined" && channel != data.currentChannel) {
-    data.currentChannel = channel;
-    eventSource.connect(channel);
-  }
-};
-
-var data = {
-  active: false,
-  currentChannel: "",
-};
-
-export default {
-  name: "Home",
-  data() {
-    return data;
-  },
-  computed: {
-    message() {
-      return this.$root.message;
-    },
-    credits() {
-      return this.$root.credits;
-    }
-  },
-  watch: {
-    $route(to) {
-      connect(to.params.channel);
-    },
-  },
-  created() {
-    eventSource.onOpen(function () {
-      data.active = true;
-    });
-    eventSource.onClose(function () {
-      data.active = false;
-    });
-    connect(this.$route.params.channel);
-  },
-  components: {
-    HelloWorld,
-    Connection,
-  },
-};
-</script>
+    <h1>Home Page</h1>
+</template>