diff --git a/demo/client_side_rendering/src/components/SizeModal.vue b/demo/client_side_rendering/src/components/SizeModal.vue
index 537ffcc..2323954 100644
--- a/demo/client_side_rendering/src/components/SizeModal.vue
+++ b/demo/client_side_rendering/src/components/SizeModal.vue
@@ -1,16 +1,18 @@
-<template> 
+<template>
   <modal name="size-modal"
         transition="nice-modal-fade"
         classes="demo-modal-class"
         :min-width="200"
-        :min-height="200" 
-        :pivot-y="0.25"
+        :min-height="200"
+        :pivot-y="0.5"
         :adaptive="true"
         :scrollable="true"
         :reset="true"
         width="60%"
         height="auto"
         @before-open="beforeOpen"
+        @opened="opened"
+        @closed="closed"
         @before-close="beforeClose">
   <div class="size-modal-content">
     <div>A new paragraph will be added every 5 sec to show how <b>height</b> scales.</div>
@@ -40,6 +42,15 @@
         clearInterval(this.timer)
         this.timer = null
         this.paragraphs = []
+      },
+
+      opened (e) {
+        // e.ref should not be undefined here
+        console.log('opened', e)
+      },
+
+      closed (e) {
+        console.log('closed', e)
       }
     }
   }
@@ -59,4 +70,4 @@
     background: #F7F7F7;
     box-shadow: 5px 5px 30px 0px rgba(46,61,73, 0.6);
   }
-</style>
\ No newline at end of file
+</style>