diff --git a/frontend/src/views/PropertyDetail.vue b/frontend/src/views/PropertyDetail.vue
index e392ac6..881cd1d 100644
--- a/frontend/src/views/PropertyDetail.vue
+++ b/frontend/src/views/PropertyDetail.vue
@@ -653,17 +653,29 @@ const renderQr = async () => {
   await nextTick()
   if (!qrCanvas.value) return
   try {
-    const QRCode = await import('qrcode')
+    const mod = await import('qrcode')
+    // `qrcode` is CommonJS; under Vite its methods land on `.default`.
+    const QRCode = (mod as any).default ?? mod
     await QRCode.toCanvas(qrCanvas.value, publicBookingIdUrl.value, {
       width: 512,
       margin: 4
     })
     qrReady.value = true
-  } catch {
+  } catch (err) {
+    console.error('QR render failed', err)
     qrReady.value = false
   }
 }
 
+// Render the QR whenever the canvas is mounted and the property is public.
+// (renderQr called during load() can run before the canvas ref binds.)
+watch(
+  [qrCanvas, () => property.value?.is_public, publicBookingIdUrl],
+  ([canvas, isPublic]) => {
+    if (canvas && isPublic) renderQr()
+  }
+)
+
 const downloadQr = () => {
   if (!qrCanvas.value || !qrReady.value) return
   const link = document.createElement('a')