diff --git a/demo/src/components/Map.vue b/demo/src/components/Map.vue
index cc9ef43..4ae09e7 100644
--- a/demo/src/components/Map.vue
+++ b/demo/src/components/Map.vue
@@ -11,7 +11,7 @@ import { useMapStore } from "../stores/MapStore";
 import Logo from "./Logo.vue";
 import LonLatBox from "./LonLatBox.vue";
 import ScaleBox from "./ScaleBox.vue";
-import * as reactiveUtils from "@arcgis/core/core/reactiveUtils.js";
+
 
 export default {
   components: {
@@ -43,23 +43,6 @@ export default {
 
   beforeMount() {
     this.mapObject = this.mapStore.init_mapObject();
-    reactiveUtils.on(
-      () => this.view,
-      "drag",
-      (event) => {
-        const dragState = event.action;
-        if (dragState === "update") {
-          useMapStore().syncMaps(this.mapObject);
-        }
-      }
-    );
-
-    reactiveUtils.watch(
-      () => this.view?.zoom,
-      (zoom) => {
-        useMapStore().syncMaps(this.mapObject);
-      }
-    );
   },
 
   mounted() {
diff --git a/demo/src/stores/MapStore.js b/demo/src/stores/MapStore.js
index 61faf28..eba809c 100644
--- a/demo/src/stores/MapStore.js
+++ b/demo/src/stores/MapStore.js
@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 import Map from "@arcgis/core/Map.js";
 import MapView from "@arcgis/core/views/MapView.js";
 import { v4 as uuid } from "uuid";
+import * as reactiveUtils from "@arcgis/core/core/reactiveUtils.js";
 
 export const useMapStore = defineStore("mapStore", {
   state() {
@@ -39,6 +40,24 @@ export const useMapStore = defineStore("mapStore", {
 
       const mapObj = { id: id, map: map, view: view };
 
+      reactiveUtils.on(
+        () => view,
+        "drag",
+        (event) => {
+          const dragState = event.action;
+          if (dragState === "update") {
+            this.syncMaps(mapObj);
+          }
+        }
+      );
+
+      reactiveUtils.watch(
+        () => view.zoom,
+        (zoom) => {
+          this.syncMaps(mapObj);
+        }
+      );
+
       this.mapObjects.push(mapObj);
       return mapObj;
     },