From a0dc4a43572f45c5e26f5a470cb7f9c47fb9f542 Mon Sep 17 00:00:00 2001
From: Shinya Fujino <shf0811@gmail.com>
Date: Mon, 11 Dec 2023 17:14:28 +0900
Subject: [PATCH] Refactor Vue example to use `<script setup>` (#9379)

---
 .../framework-vue/src/components/Counter.vue  | 29 +++++++------------
 1 file changed, 10 insertions(+), 19 deletions(-)

diff --git a/examples/framework-vue/src/components/Counter.vue b/examples/framework-vue/src/components/Counter.vue
index 5ce5352b88..11f2bf1b50 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;