init pinia

remote/components/RemoteContactRouter.vue

@@ -1,24 +1,37 @@
 <template>
   <div>
-    <component v-if="asyncPageComponent" :is="asyncPageComponent" />
+    <component
+      v-if="asyncPageComponent"
+      :is="asyncPageComponent"
+      @increment="(v: number) => emit('increment', v)"
+    />
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { defineAsyncComponent } from "vue"
+import { useHostPinia } from "~/composables/useHostPinia"
+
+const props = defineProps<{
+  label: string
+}>()
+
+const emit = defineEmits<{
+  (e: "increment", count: number): void
+}>()
+
+useHostPinia()
 
 /**
  * @todo
  * it'll be nice if there is a way to dynamically match route and render..
  */
-console.log(">>", window.location.pathname)
-
 const Index = defineAsyncComponent(() => import("@/pages/contact/index.vue"))
-const Properties = defineAsyncComponent(() =>
-  import("@/pages/contact/properties.vue")
+const Properties = defineAsyncComponent(
+  () => import("@/pages/contact/properties.vue")
 )
 
-let asyncPageComponent
+let asyncPageComponent: unknown
 if (/\/contact\/properties/.test(window.location.pathname)) {
   asyncPageComponent = Properties
 } else {