moving Vue3 component snippet to Composition API

Packages/User/Preferences.sublime-settings

@@ -44,4 +44,5 @@
 	/*"font_size": 9,*/
 	/*"font_size": 9,*/
 	/*"font_size": 12,*/
+	"font_size": 10,
 }

Packages/User/laravel_model.sublime-snippet

@@ -16,19 +16,19 @@ protected \$keyType = 'string';
 /** @var bool */
 public \$incrementing = false;
 
-/** @var array */
+/** @var string[] */
 protected \$fillable = [];
 
-/** @var array */
+/** @var string[] */
 protected \$hidden = [];
 
 /** @var array */
 protected \$casts = [];
 
-/** @var array */
+/** @var string[] */
 protected \$dates = [];
 
-/** @var array */
+/** @var string[] */
 protected \$appends = [];
 
 /** @var array */

Packages/User/vue-component.sublime-snippet

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { defineComponent } from 'vue'
+import { defineComponent, reactive, ref, computed, watch, onBeforeMount, onMounted } from 'vue'
 import AppLayout from '@/Layouts/AppLayout.vue'
 
 export default defineComponent({
@@ -23,21 +23,35 @@ export default defineComponent({
     AppLayout,
   },
 
-  setup(props, {emit}) {
+  setup(props, {context, emit}) {
-    return {}
+    let aVariable = reactive({})
+
+    let compVariable = computed(() => {
+      //return 'foo'
+    })
+
+    watch(variable, (newValue, oldValue) => {
+      //
+    })
+
+    onBeforeMount(() => {
+      //
+    })
+
+    onMounted(() => {
+      //
+    })
+
+    function myMethod() {
+      aVariable.value = null
+    }
+
+    return {
+      aVariable,
+      compVariable,
+      myMethod,
+    }
   },
-
-  beforeMount() {},
-
-  mounted() {},
-
-  data() {
-    return {}
-  },
-
-  computed: {},
-
-  methods: {},
 })
 </script>