watch for external udpate

package.json

@@ -1,6 +1,6 @@
 {
   "name": "magico-pagebuilder",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "private": true,
   "scripts": {
     "dev": "vite",

src/components/MagicoPagebuilder.vue

@@ -27,7 +27,7 @@
               <li>
                 <a
                   @click.prevent="
-                    modalLoad = !modalLoad;
+                    modalLoad = !modalLoad
                     pageType = { name: null }
                   "
                   class="dropdown-item"
@@ -38,7 +38,7 @@
               <li>
                 <a
                   @click.prevent="
-                    modalSave = !modalSave;
+                    modalSave = !modalSave
                     pageType = { name: null }
                   "
                   class="dropdown-item"
@@ -47,13 +47,7 @@
                 >
               </li>
               <li v-if="descriptionAllegro">
-                <a
+                <a @click.prevent="pasteAllegro" class="dropdown-item" href="#"
-                  @click.prevent="
-                  pasteAllegro
-                  "
-                  
-                  class="dropdown-item"
-                  href="#"
                   >Wklej opis <i>Allegro</i></a
                 >
               </li>
@@ -71,7 +65,7 @@
         @start="drag = true"
         item-key="d"
         @end="
-          drag = false;
+          drag = false
           onChange()
         "
       >
@@ -147,7 +141,7 @@
         <!-- <textarea style="display:none" :name="namex">{{ comps }}</textarea> --><button
           class="btn btn-block btn-primary mt-4"
           @click.prevent="
-            modalAddSection = !modalAddSection;
+            modalAddSection = !modalAddSection
             optionx = false
           "
         >
@@ -192,12 +186,13 @@ export default {
       modalSave: false,
       modalLoad: false,
       descriptionAllegro: false,
+      ownUpdate: false
     }
   },
   props: ['name', 'modelValue', 'showcopy', 'lang'],
   mounted: function () {
     if (localStorage.getItem('description_clipboard')) {
-      this.descriptionAllegro=true;
+      this.descriptionAllegro = true
     }
     //var trimmed = $("#body_pagebuilder").val().replace((/  |\r\n|\n|\r/gm),"");
     var trimmed = this.modelValue //.replace((/{2} |\r\n|\n|\r/gm), "");
@@ -214,8 +209,7 @@ export default {
       ]
     }
   },
-  computed: {
+  computed: {},
-  },
   created: function () {
     if (this.name) this.namex = this.name
     else this.namxe = 'body'
@@ -224,10 +218,29 @@ export default {
     // whenever question changes, this function will run
     comps: function (newQuestion) {
       console.log('nq', newQuestion)
+    },
+    modelValue: function () {
+      if (this.ownUpdate) {
+        this.ownUpdate = false
+        return
+      }
+      try {
+        this.comps = JSON.parse(trimmed)
+      } catch (e) {
+        console.warn(e)
+        this.comps = [
+          {
+            label: '1 kolumna  ',
+            name: 'col_1',
+            columns: [{ name: 'col-md-12', items: [{ name: 'core_section_textarea' }] }]
+          }
+        ]
+      }
     }
   },
   methods: {
     onChange: function () {
+      this.ownUpdate = true
       this.$emit('update:modelValue', JSON.stringify(this.comps))
       this.$emit('change')
     },
@@ -266,43 +279,42 @@ export default {
       this.changeBody()
     },
     pasteAllegro: function () {
-      let sections = localStorage.getItem('description_clipboard');
+      let sections = localStorage.getItem('description_clipboard')
       try {
-        sections = JSON.parse(sections);
+        sections = JSON.parse(sections)
       } catch (e) {
         if (e instanceof SyntaxError) {
-            sections = [{ name: 'Tekst', cols: [{ type: 'text', value: sections, size: 12 }] }];
+          sections = [{ name: 'Tekst', cols: [{ type: 'text', value: sections, size: 12 }] }]
         }
       }
 
-    const pagebuilder = sections.map(item => {
+      const pagebuilder = sections.map((item) => {
-        const columns = [];
+        const columns = []
 
         if (item.cols && Array.isArray(item.cols)) {
-            item.cols.forEach(col => {
+          item.cols.forEach((col) => {
             const column = {
-                   
+              type: 'container',
-                    type:"container",
               name: 'col-md-' + col.size,
               items: [
                 {
-                            name: (col.type === 'img' ? 'core_section_image' : 'core_section_textarea'),
+                  name: col.type === 'img' ? 'core_section_image' : 'core_section_textarea',
-                            text: col.value,
+                  text: col.value
                 }
               ]
-                };
+            }
             if (col.type === 'img' && col.figcaption) {
-                    column.items[0]['figcaption'] = col.figcaption;
+              column.items[0]['figcaption'] = col.figcaption
             }
-                columns.push(column);
+            columns.push(column)
-            });
+          })
         }
 
-        return { columns,label:'',name:'', type:'container' };
+        return { columns, label: '', name: '', type: 'container' }
-    });
+      })
 
-     this.comps = pagebuilder;
+      this.comps = pagebuilder
-     this.onChange();
+      this.onChange()
     },
     changeBody() {
       var t = this