update structure

remote/components/ContactRouter.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <component v-if="asyncPageComponent" :is="asyncPageComponent" />
+  </div>
+</template>
+
+<script setup>
+import { defineAsyncComponent } from "vue"
+
+/**
+ * @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")
+)
+
+let asyncPageComponent
+if (/\/contact\/properties/.test(window.location.pathname)) {
+  asyncPageComponent = Properties
+} else {
+  asyncPageComponent = Index
+}
+</script>

remote/components/RemoteComponent.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="p-4 border rounded bg-blue-50 sty1">
-    <h2 class="text-xl mb-2">Remote Component</h2>
-    <p>This component is exposed from the remote application</p>
-  </div>
-</template>
-
-<script setup>
-defineComponent({
-  name: 'RemoteComponent'
-})
-
-onMounted(() => {
-  console.log('mounted')
-})
-</script>
-
-<style>
-  .sty1 {
-    background: pink;
-  }
-</style>