tweaking vue component

Packages/User/vue-component.sublime-snippet

@@ -1,5 +1,25 @@
 <snippet>
     <content><![CDATA[
+<script setup>
+import { useAttrs, reactive, ref, computed, watch, onBeforeMount, onMounted, provide, inject } from 'vue'
+import AppLayout from '@/Layouts/AppLayout.vue'
+
+const emit = defineEmits([])
+
+const attrs = useAttrs()
+
+const props = defineProps({})
+
+// computed properties
+
+// watchers
+
+// lifecycle hooks
+
+// methods
+
+</script>
+
 <template>
     <app-layout title="${1:TITLE}">
         <template #header>${1:TITLE}</template>
@@ -10,55 +30,6 @@
     </app-layout>
 </template>
 
-<script>
-import { defineComponent, reactive, ref, computed, watch, onBeforeMount, onMounted, provide, inject } from "vue"
-import AppLayout from "@/Layouts/AppLayout.vue"
-
-export default defineComponent({
-  emits: [],
-
-  props: {},
-
-  components: {
-    AppLayout,
-  },
-
-  setup(props, { attrs, slots, emit, expose }) {
-    let aVariable = ref({})
-
-    // computed properties
-    let compVariable = computed(() => {
-      //return "foo"
-    })
-
-    // watchers
-    watch(aVariable, (newValue, oldValue) => {
-      //
-    })
-
-    // lifecycle hooks
-    onBeforeMount(() => {
-      //
-    })
-
-    onMounted(() => {
-      //
-    })
-
-    // methods
-    function myMethod() {
-      aVariable.value = null
-    }
-
-    return {
-      aVariable,
-      compVariable,
-      myMethod,
-    }
-  },
-})
-</script>
-
 ]]></content>
     <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
     <tabTrigger>vcomp</tabTrigger>