Hot reload for objects when updated inside asset manager so no page reload is required

src/components/utilities/zoneEditor/Objects.vue

@@ -13,7 +13,7 @@
       <template #modalBody>
         <div class="my-[15px] mx-auto">
           <div class="columns-2 sm:columns-3 md:columns-4 lg:columns-5 gap-4">
-            <div v-for="(object, index) in objects" :key="index" class="mb-4">
+            <div v-for="(object, index) in zoneEditorStore.objectList" :key="index" class="mb-4">
               <img
                 :src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
                 alt="Object"
@@ -41,14 +41,13 @@ import Modal from '@/components/utilities/Modal.vue'
 import type { Object } from '@/types'
 
 const socket = useSocketStore()
-const objects = ref<Object[]>([])
 const isModalOpen = ref(false)
 const zoneEditorStore = useZoneEditorStore()
 
 onMounted(async () => {
   isModalOpen.value = true
   socket.connection.emit('gm:object:list', {}, (response: Object[]) => {
-    objects.value = response
+    zoneEditorStore.setObjectList(response)
   })
 })
 </script>

src/components/utilities/zoneEditor/Tiles.vue

@@ -8,7 +8,7 @@
         <div class="m-[15px]">
           <div class="flex flex-wrap gap-2.5">
             <img class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300" src="/assets/zone/blank_tile.png" alt="Blank tile" @click="zoneEditorStore.setSelectedTile('blank_tile')" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === 'blank_tile' }" />
-            <img class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300" v-for="(tile, index) in tiles" :key="index" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
+            <img class="w-[64px] h-[32px] cursor-pointer border-2 border-solid border-transparent transition ease duration-300" v-for="(tile, index) in zoneEditorStore.tileList" :key="index" :src="`${config.server_endpoint}/assets/tiles/${tile}.png`" alt="Tile" @click="zoneEditorStore.setSelectedTile(tile)" :class="{ selected: zoneEditorStore.selectedTile && zoneEditorStore.selectedTile === tile }" />
           </div>
         </div>
       </template>
@@ -24,14 +24,13 @@ import { useSocketStore } from '@/stores/socket'
 import Modal from '@/components/utilities/Modal.vue'
 
 const socket = useSocketStore()
-const tiles = ref<string[]>([])
 const isModalOpen = ref(false)
 const zoneEditorStore = useZoneEditorStore()
 
 onMounted(async () => {
   isModalOpen.value = true
   socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
-    tiles.value = response
+    zoneEditorStore.tileList = response
   })
 })
 </script>

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -17,7 +17,7 @@ import config from '@/config'
 import Tileset = Phaser.Tilemaps.Tileset
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import { Container, TilemapLayer as TilemapLayerC, useScene, Image } from 'phavuer'
-import { onBeforeMount, onBeforeUnmount, ref, toRaw } from 'vue'
+import { onBeforeMount, onBeforeUnmount, ref, toRaw, watch } from 'vue'
 import Controls from '@/components/utilities/Controls.vue'
 import { useSocketStore } from '@/stores/socket'
 import Toolbar from '@/components/utilities/zoneEditor/Toolbar.vue'
@@ -28,6 +28,7 @@ import { placeTile, tileToWorldXY } from '@/services/zone'
 import { useAssetStore } from '@/stores/assets'
 import Objects from '@/components/utilities/zoneEditor/Objects.vue'
 import type { Object } from '@/types'
+import { storeToRefs } from 'pinia'
 
 const scene = useScene()
 const socket = useSocketStore()
@@ -95,10 +96,9 @@ function pencil(tile: Phaser.Tilemaps.Tile) {
 
   if (zoneEditorStore.drawMode === 'object') {
     if (zoneEditorStore.selectedObject === null) return
-    console.log('zoneObjects.value', zoneObjects.value)
     zoneObjects.value.push({
       id: Math.random().toString(10),
-      object: zoneEditorStore.selectedObject,
+      object: toRaw(zoneEditorStore.selectedObject),
       position_x: tileToWorldXY(tiles, tile.x, tile.y).position_x,
       position_y: tileToWorldXY(tiles, tile.x, tile.y).position_y
     })
@@ -121,6 +121,20 @@ function save() {
   })
 }
 
+const { objectList } = storeToRefs(zoneEditorStore)
+
+watch(objectList, (newObjects) => {
+  // update objects inside zoneObjects and keep the position
+  zoneObjects.value = zoneObjects.value.map((object) => {
+    const newObject = newObjects.find((newObject) => newObject.id === object.object.id)
+    if (!newObject) return object
+    return {
+      ...object,
+      object: newObject
+    }
+  })
+});
+
 onBeforeMount(() => {
   exampleTilesArray.forEach((row, y) => row.forEach((tile, x) => placeTile(zone, tiles, x, y, 'blank_tile')))
   socket.connection.emit('gm:zone_editor:zone:request', { zoneId: socket.character.zoneId })