diff --git a/demo/src/components/ScaleBox.vue b/demo/src/components/ScaleBox.vue
index 74fded8..6a62d6c 100644
--- a/demo/src/components/ScaleBox.vue
+++ b/demo/src/components/ScaleBox.vue
@@ -16,7 +16,7 @@ export default {
     mapObject: Object,
   },
   data() {
-    return { ratio: "n/a" };
+    return { ratio: "n/a", scaleBar: null };
   },
 
   methods: {
@@ -29,6 +29,14 @@ export default {
   mounted() {
     const view = this.mapObject.view;
 
+    const scaleBar = new ScaleBar({
+      view: view,
+      unit: "dual",
+      container: this.$el.querySelector("#scale-widget"),
+    });
+
+    view.ui.add(this.$el, "bottom-left");
+
     reactiveUtils
       .whenOnce(() => view.ready)
       .then(() => {
@@ -41,14 +49,6 @@ export default {
         this.updateRatio(view);
       }
     );
-
-    const scaleBar = new ScaleBar({
-      view: view,
-      unit: "dual",
-      container: "scale-widget",
-    });
-
-    view.ui.add(this.$el, "bottom-left");
   },
 };
 </script>