feat(vue): use composition api

Author: NathanWalker

packages/template-blank-vue-ts/app/components/Home.vue

@@ -1,27 +1,17 @@
 <template>
-  <Page>
-    <ActionBar>
-      <Label text="Home" class="font-bold text-lg"/>
-    </ActionBar>
+    <Page>
+        <ActionBar>
+            <Label text="Home"/>
+        </ActionBar>
 
-    <GridLayout>
-      <Label class="text-xl align-middle text-center text-gray-500" :text="message" @tap="logMessage" />
-    </GridLayout>
-  </Page>
+        <GridLayout>
+            <Label class="text-xl align-middle text-center text-gray-500" :text="message" />
+        </GridLayout>
+    </Page>
 </template>
 
-<script lang="ts">
-  export default {
-    computed: {
-      message() {
-        return "Blank {N}-Vue app";
-      }
-    },
+<script setup lang="ts">
+  import { computed } from 'nativescript-vue'
 
-    methods: {
-      logMessage() {
-        console.log('You have tapped the message!')
-      }
-    }
-  };
+  const message = computed(() => "Blank {N}-Vue app");
 </script>

packages/template-blank-vue/app/components/Home.vue

@@ -10,14 +10,8 @@
     </Page>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'nativescript-vue'
+<script setup lang="ts">
+  import { computed } from 'nativescript-vue'
 
-  export default defineComponent({
-    computed: {
-      message() {
-        return "Blank {N}-Vue app";
-      }
-    }
-  });
+  const message = computed(() => "Blank {N}-Vue app");
 </script>