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
-                  @click.prevent="
-                  pasteAllegro
-                  "
-                  
-                  class="dropdown-item"
-                  href="#"
+                <a @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
           "
         >
@@ -169,7 +163,7 @@ import PagebuilderTemplateLoad from './PagebuilderTemplateLoad.vue'
 
 export default {
   name: 'MagicoPagebuilder',
-  emits: ['update:modelValue','change'],
+  emits: ['update:modelValue', 'change'],
   components: {
     'b-modal': MagicoModal,
     PagebuilderSection,
@@ -191,13 +185,14 @@ export default {
       pageType: { id: false },
       modalSave: false,
       modalLoad: false,
-      descriptionAllegro:false,
+      descriptionAllegro: false,
+      ownUpdate: false
     }
   },
   props: ['name', 'modelValue', 'showcopy', 'lang'],
   mounted: function () {
-    if(localStorage.getItem('description_clipboard')){
-      this.descriptionAllegro=true;
+    if (localStorage.getItem('description_clipboard')) {
+      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')
     },
@@ -265,44 +278,43 @@ export default {
       this.pageType.body = this.pageType.source
       this.changeBody()
     },
-    pasteAllegro: function(){
-      let sections = localStorage.getItem('description_clipboard');
+    pasteAllegro: function () {
+      let sections = localStorage.getItem('description_clipboard')
       try {
-        sections = JSON.parse(sections);
-    } catch (e) {
+        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 columns = [];
+      const pagebuilder = sections.map((item) => {
+        const columns = []
 
         if (item.cols && Array.isArray(item.cols)) {
-            item.cols.forEach(col => {
-                const column = {
-                   
-                    type:"container",
-                    name: 'col-md-' + col.size,
-                    items: [
-                        {
-                            name: (col.type === 'img' ? 'core_section_image' : 'core_section_textarea'),
-                            text: col.value,
-                        }
-                    ]
-                };
-                if (col.type === 'img' && col.figcaption) {
-                    column.items[0]['figcaption'] = col.figcaption;
+          item.cols.forEach((col) => {
+            const column = {
+              type: 'container',
+              name: 'col-md-' + col.size,
+              items: [
+                {
+                  name: col.type === 'img' ? 'core_section_image' : 'core_section_textarea',
+                  text: col.value
                 }
-                columns.push(column);
-            });
+              ]
+            }
+            if (col.type === 'img' && col.figcaption) {
+              column.items[0]['figcaption'] = col.figcaption
+            }
+            columns.push(column)
+          })
         }
 
-        return { columns,label:'',name:'', type:'container' };
-    });
+        return { columns, label: '', name: '', type: 'container' }
+      })
 
-     this.comps = pagebuilder;
-     this.onChange();
+      this.comps = pagebuilder
+      this.onChange()
     },
     changeBody() {
       var t = this