feat(vue-demo): add defineExpose example

apps/vue-demo/src/component/atom/CounterAtom.vue

@@ -4,6 +4,7 @@
 
 <script setup lang="ts">
 import { onMounted, onUnmounted, reactive } from 'vue';
+import { ICounterRef } from '../types';
 
 let initValue = Math.round(Math.random() * 10);
 let timer: number = -1;
@@ -15,6 +16,12 @@ onMounted(() => {
     }, 1000);
 });
 
+defineExpose<ICounterRef>({
+    add(x: number) {
+        data.count += x;
+    },
+});
+
 onUnmounted(() => {
     clearInterval(timer);
 });

apps/vue-demo/src/component/pinia/PiniaSection.vue

@@ -2,10 +2,21 @@
 import HeadingAtom from '../atom/HeadingAtom.vue';
 import CounterAtom from '../atom/CounterAtom.vue';
 import PiniaSubmit from './PiniaSubmit.vue';
+import { ref } from 'vue';
+import { ICounterRef } from '../types';
+
+const counterRef = ref<ICounterRef>();
+
+const onClick = () => {
+    if (counterRef.value) {
+        counterRef.value.add(100);
+    }
+};
 </script>
 
 <template>
     <HeadingAtom />
-    <CounterAtom />
+    <CounterAtom ref="counterRef" />
+    <button @click="onClick">+100</button>
     <PiniaSubmit />
 </template>

apps/vue-demo/src/component/types.ts

@@ -0,0 +1,7 @@
+/**
+ * Demo for shared types
+ */
+
+export interface ICounterRef {
+    add(x: number): void;
+}