refetch on change

apps/frontend/src/views/ManageDashboardView.vue

@@ -48,7 +48,10 @@
 
 <script setup lang="ts">
 import { useQuery } from '@tanstack/vue-query'
-import { qrCodeDbLocal } from '@/api/dbs'
+import { qrCodeDbLocal, qrCodeDbRemote } from '@/api/dbs'
+import { getUserUuid } from '@/utils/getUserUuid'
+import { onMounted } from 'vue'
+import type { QRCodeDocument } from '@hereconnect/types'
 
 const query = useQuery({
   queryKey: ['qrCodes'],
@@ -60,4 +63,23 @@ const query = useQuery({
     })
   },
 })
+
+let replication: PouchDB.Replication.Replication<QRCodeDocument> | null = null
+onMounted(() => {
+  replication = qrCodeDbLocal.replicate.from(qrCodeDbRemote, {
+    live: true,
+    selector: {
+      type: 'qr_code',
+      user_uuid: getUserUuid(),
+    },
+  })
+  replication.on('change', () => {
+    query.refetch()
+  })
+})
+onBeforeUnmount(() => {
+  if (replication) {
+    replication.cancel()
+  }
+})
 </script>