diff --git a/components/lib/sidebar/BaseSidebar.vue b/components/lib/sidebar/BaseSidebar.vue
index f8acee9939..773397a560 100644
--- a/components/lib/sidebar/BaseSidebar.vue
+++ b/components/lib/sidebar/BaseSidebar.vue
@@ -52,6 +52,15 @@ export default {
         return {
             $parentInstance: this
         };
-    }
+    },
+    watch: {
+        dismissable(newValue) {
+            if (newValue) {
+                this.bindOutsideClickListener();
+            } else {
+                this.unbindOutsideClickListener();
+            }
+        }
+    },
 };
 </script>
diff --git a/components/lib/sidebar/Sidebar.spec.js b/components/lib/sidebar/Sidebar.spec.js
index 9a57a17dbf..2ad9090e91 100644
--- a/components/lib/sidebar/Sidebar.spec.js
+++ b/components/lib/sidebar/Sidebar.spec.js
@@ -119,4 +119,12 @@ describe('Sidebar.vue', () => {
 
         expect(wrapper.vm.containerVisible).toBeFalsy();
     });
+
+    it('When component is mounted , dismissable property should still be reactive', async () => {
+        await wrapper.setProps({ dismissable: false, visible: true });
+
+        await wrapper.setProps({ dismissable: true });
+
+        expect(wrapper.vm.containerVisible).toBeTruthy();
+    });
 });