Switch to using single-file components (SFC) in Vue

ts/app.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const count = ref(0);
+const message = ref('Hello from Vue 3!');
+</script>
+
+<template>
+  <div>
+    <p>{{ message }}</p>
+    <button @click="count++">Count: {{ count }}</button>
+  </div>
+</template>
+
+<style scoped>
+button {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+}
+</style>

ts/main.ts

@@ -1,19 +1,4 @@
 import { createApp } from 'vue';
-
-// Simple example without SFCs
-const App = {
-  data() {
-    return {
-      count: 0,
-      message: 'Hello from Vue 3!'
-    }
-  },
-  template: `
-    <div>
-      <p>{{ message }}</p>
-      <button @click="count++">Count: {{ count }}</button>
-    </div>
-  `
-};
+import App from './app.vue';
 
 createApp(App).mount('#app');