Refactor Vue example to use `<script setup>` (#9379)

1 files changed, 10 insertions, 19 deletions

diff --git a/examples/framework-vue/src/components/Counter.vue b/examples/framework-vue/src/components/Counter.vue
index 5ce5352b8..11f2bf1b5 100644
--- a/examples/framework-vue/src/components/Counter.vue
+++ b/examples/framework-vue/src/components/Counter.vue
@@ -1,31 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const count = ref(0);
+const add = () => count.value++;
+const subtract = () => count.value--;
+</script>
+
 <template>
 	<div class="counter">
-		<button @click="subtract()">-</button>
+		<button @click="subtract">-</button>
 		<pre>{{ count }}</pre>
-		<button @click="add()">+</button>
+		<button @click="add">+</button>
 	</div>
 	<div class="counter-message">
 		<slot />
 	</div>
 </template>
 
-<script lang="ts">
-import { ref } from 'vue';
-export default {
-	setup() {
-		const count = ref(0);
-		const add = () => (count.value = count.value + 1);
-		const subtract = () => (count.value = count.value - 1);
-
-		return {
-			count,
-			add,
-			subtract,
-		};
-	},
-};
-</script>
-
 <style>
 .counter {
 	display: grid;