diff --git a/o2web/source/x_component_process_FormDesigner/$Main/bottom/tools-element.json b/o2web/source/x_component_process_FormDesigner/$Main/bottom/tools-element.json
index 185cb646ae533d554983bd27b6ab5344429a3fa5..54a977e22ed03e1ce74ce438d0e66bd3a9d177d0 100644
--- a/o2web/source/x_component_process_FormDesigner/$Main/bottom/tools-element.json
+++ b/o2web/source/x_component_process_FormDesigner/$Main/bottom/tools-element.json
@@ -19,16 +19,6 @@
     "text": MWF.xApplication.process.FormDesigner.LP.modules.el_number,
     "className": "Elnumber"
   },
-  "elicon": {
-    "fontIcon": "el-icon-picture-outline-round",
-    "text": MWF.xApplication.process.FormDesigner.LP.modules.el_icon,
-    "className": "Elicon"
-  },
-  "elbutton": {
-    "fontIcon": "el-icon-thumb",
-    "text": MWF.xApplication.process.FormDesigner.LP.modules.el_button,
-    "className": "Elbutton"
-  },
   "elradio": {
     "fontIcon": "el-icon-success",
     "text": MWF.xApplication.process.FormDesigner.LP.modules.el_radio,
@@ -59,6 +49,16 @@
     "text": MWF.xApplication.process.FormDesigner.LP.modules.el_slider,
     "className": "Elslider"
   },
+  "elbutton": {
+    "fontIcon": "el-icon-thumb",
+    "text": MWF.xApplication.process.FormDesigner.LP.modules.el_button,
+    "className": "Elbutton"
+  },
+  "elicon": {
+    "fontIcon": "el-icon-picture-outline-round",
+    "text": MWF.xApplication.process.FormDesigner.LP.modules.el_icon,
+    "className": "Elicon"
+  },
   "elcommon": {
     "fontIcon": "el-icon-full-screen",
     "text": MWF.xApplication.process.FormDesigner.LP.modules.el_common,
diff --git a/o2web/source/x_component_process_FormDesigner/$Main/default/tools-element.json b/o2web/source/x_component_process_FormDesigner/$Main/default/tools-element.json
index 185cb646ae533d554983bd27b6ab5344429a3fa5..54a977e22ed03e1ce74ce438d0e66bd3a9d177d0 100644
--- a/o2web/source/x_component_process_FormDesigner/$Main/default/tools-element.json
+++ b/o2web/source/x_component_process_FormDesigner/$Main/default/tools-element.json
@@ -19,16 +19,6 @@
     "text": MWF.xApplication.process.FormDesigner.LP.modules.el_number,
     "className": "Elnumber"
   },
-  "elicon": {
-    "fontIcon": "el-icon-picture-outline-round",
-    "text": MWF.xApplication.process.FormDesigner.LP.modules.el_icon,
-    "className": "Elicon"
-  },
-  "elbutton": {
-    "fontIcon": "el-icon-thumb",
-    "text": MWF.xApplication.process.FormDesigner.LP.modules.el_button,
-    "className": "Elbutton"
-  },
   "elradio": {
     "fontIcon": "el-icon-success",
     "text": MWF.xApplication.process.FormDesigner.LP.modules.el_radio,
@@ -59,6 +49,16 @@
     "text": MWF.xApplication.process.FormDesigner.LP.modules.el_slider,
     "className": "Elslider"
   },
+  "elbutton": {
+    "fontIcon": "el-icon-thumb",
+    "text": MWF.xApplication.process.FormDesigner.LP.modules.el_button,
+    "className": "Elbutton"
+  },
+  "elicon": {
+    "fontIcon": "el-icon-picture-outline-round",
+    "text": MWF.xApplication.process.FormDesigner.LP.modules.el_icon,
+    "className": "Elicon"
+  },
   "elcommon": {
     "fontIcon": "el-icon-full-screen",
     "text": MWF.xApplication.process.FormDesigner.LP.modules.el_common,
diff --git a/o2web/source/x_component_process_FormDesigner/Module/$ElElement.js b/o2web/source/x_component_process_FormDesigner/Module/$ElElement.js
index 46529e4ca22788a9dd47c5ba8d9f05913a0cfef4..a784afd972c68096ff1ddd03f02b15d1a39043a8 100644
--- a/o2web/source/x_component_process_FormDesigner/Module/$ElElement.js
+++ b/o2web/source/x_component_process_FormDesigner/Module/$ElElement.js
@@ -202,6 +202,7 @@ MWF.xApplication.process.FormDesigner.Module.$ElElement = MWF.FC$ElElement = new
 			case "name": this.setPropertyName(); break;
 			case "id": this.setPropertyId(); break;
 			case "buttonRadio":
+			case "vueSlot":
 				if (this.isPropertyLoaded) if (this.vm) this.resetElement(); break;
 			default: ;
 		}
diff --git a/o2web/source/x_component_process_Xform/$ElModule.js b/o2web/source/x_component_process_Xform/$ElModule.js
index c39eec35d899e3ef072d4d32eb24380113508b8f..057ec4559b3c7627fd993f762eeb568d2e4a9674 100644
--- a/o2web/source/x_component_process_Xform/$ElModule.js
+++ b/o2web/source/x_component_process_Xform/$ElModule.js
@@ -47,6 +47,21 @@ o2.xApplication.process.Xform.$ElModule = MWF.APP$ElModule =  new Class(
             this._loadUserInterface();
         }
     },
+    _checkVmodel: function(text){
+        if (text){
+            this.vModels = [];
+            var reg = /(?:v-model)(?:.lazy|.number|.trim)?(?:\s*=\s*)(?:["'])?([^"']*)/g;
+            var arr;
+            while ((arr = reg.exec(text)) !== null) {
+                if (arr.length>1 && arr[1]){
+                    var modelId = this.json.id.substring(0, this.json.id.lastIndexOf(".."));
+                    modelId = (modelId) ? modelId+".."+arr[1] : arr[1];
+                    this.json[arr[1]] = this.getBusinessDataById(null, modelId);
+                    this.vModels.push(arr[1]);
+                }
+            }
+        }
+    },
 
     _loadUserInterface: function(){
         this.node.appendHTML(this._createElementHtml(), "before");
@@ -62,6 +77,7 @@ o2.xApplication.process.Xform.$ElModule = MWF.APP$ElModule =  new Class(
         this._createVueApp();
     },
     _createVueApp: function(){
+        if (this.json.vueSlot) this._checkVmodel(this.json.vueSlot);
         if (!this.vm) this._loadVue(this._mountVueApp.bind(this));
     },
 
@@ -95,14 +111,27 @@ o2.xApplication.process.Xform.$ElModule = MWF.APP$ElModule =  new Class(
         };
         app.methods = this._createVueMethods(app);
         this.appendVueExtend(app);
+        this.appendVueWatch(app);
         return app;
     },
+    appendVueWatch: function(app){
+        if (this.vModels && this.vModels.length){
+            app.watch = app.watch || {};
+            this.vModels.forEach(function(m){
+                app.watch[m] = function(val, oldVal){
+                    var modelId = this.json.id.substring(0, this.json.id.lastIndexOf(".."));
+                    modelId = (modelId) ? modelId+".."+m : m;
+                    this.setBusinessDataById(val, modelId);
+                }.bind(this);
+            }.bind(this));
+        }
+    },
     appendVueMethods: function(methods){},
     appendVueExtend: function(app){
-        if (!app.methods) app.methods = {};
-        this.options.elEvents.forEach(function(k){
-            this._createEventFunction(app, k);
-        }.bind(this));
+        // if (!app.methods) app.methods = {};
+        // this.options.elEvents.forEach(function(k){
+        //     this._createEventFunction(app, k);
+        // }.bind(this));
     },
     appendVueEvents: function(methods){
         this.options.elEvents.forEach(function(k){
@@ -112,7 +141,7 @@ o2.xApplication.process.Xform.$ElModule = MWF.APP$ElModule =  new Class(
     _createEventFunction: function(methods, k){
         methods["$loadElEvent_"+k.camelCase()] = function(){
             this.validationMode();
-            //if (k==="change") this._setBusinessData(this.getInputData());
+            if (k==="change") this._setBusinessData(this.getInputData());
             if (this.json.events && this.json.events[k] && this.json.events[k].code){
                 this.form.Macro.fire(this.json.events[k].code, this, arguments);
             }
@@ -128,10 +157,17 @@ o2.xApplication.process.Xform.$ElModule = MWF.APP$ElModule =  new Class(
         return methods || {};
     },
     _createVueData: function(){
+        if (this.vModels && this.vModels.length){
+            this.vModels.forEach(function(m){
+                if (!this.json.hasOwnProperty(m)) this.json[m] = "";
+            }.bind(this));
+        }
         if (this.json.vueData && this.json.vueData.code){
             var d = this.form.Macro.exec(this.json.vueData.code, this);
             this.json = Object.merge(d, this.json);
         }
+        if (this.json.$id===this.json.id) this.form.Macro.environment.data.check(this.json.$id);
+        this.json[this.json.$id] = this._getBusinessData();
         this._appendVueData();
         return this.json;
     },
diff --git a/o2web/source/x_component_process_Xform/$Elinput.js b/o2web/source/x_component_process_Xform/$Elinput.js
index 794cdba5ec673846ba31357ee6cd9d2df821ed0e..e4d79dacc3fe13b7a78bea4a055fe13130cfb37a 100644
--- a/o2web/source/x_component_process_Xform/$Elinput.js
+++ b/o2web/source/x_component_process_Xform/$Elinput.js
@@ -11,24 +11,35 @@ Object.assign(o2.APP$Elinput.prototype, {
     __setValue: function(value){
         this.moduleValueAG = null;
         this._setBusinessData(value);
-        this.json[this.json.id] = value;
-        if (this.readonly || this.json.isReadonly) this.node.set("text", value);
+        this.json[this.json.$id] = value;
+        this.__setReadonly(value);
         this.fieldModuleLoaded = true;
         return value;
     },
     __setData: function(data){
         var old = this.getInputData();
         this._setBusinessData(data);
-        this.json[this.json.id] = data;
-        if (this.readonly || this.json.isReadonly) this.node.set("text", value);
+        this.json[this.json.$id] = data;
+        this.__setReadonly(data);
         if (old!==data) this.fireEvent("change");
         this.moduleValueAG = null;
         this.validationMode();
     },
+    __setReadonly: function(data){
+        if (this.readonly || this.json.isReadonly) this.node.set("text", data);
+    },
     getInputData: function(){
-        return this.json[this.json.id];
+        return this.json[this.json.$id];
     },
+    // _getVueModelBindId: function(){
+    //     if (this.json.id.indexOf("..")!==-1){
+    //         this.json["$id"] ="__"+this.json.id.replace(/\.\./g, "_")
+    //     }else{
+    //         this.json["$id"] = this.json.id;
+    //     }
+    // },
     _loadNodeEdit: function(){
+        this.json["$id"] = (this.json.id.indexOf("..")!==-1) ? this.json.id.replace(/\.\./g, "_") : this.json.id;
         this.node.appendHTML(this._createElementHtml(), "before");
         var input = this.node.getPrevious();
 
diff --git a/o2web/source/x_component_process_Xform/$Module.js b/o2web/source/x_component_process_Xform/$Module.js
index b37ebb2e930267e54d434faf111bcffe3d237447..a6a626ef26717ab7b357d4a56fb5c42fb9c1f46b 100644
--- a/o2web/source/x_component_process_Xform/$Module.js
+++ b/o2web/source/x_component_process_Xform/$Module.js
@@ -12,6 +12,7 @@ MWF.xApplication.process.Xform.$Module = MWF.APP$Module =  new Class(
         /**
          * 组件加载前触发。当前组件的queryLoad事件运行时还没有在form里注册，通过this.form.get("fieldId")不能获取到当前组件，需要用this.target获取。
          * @event MWF.xApplication.process.Xform.$Module#queryLoad
+         * @event MWF.xApplication.process.Xform.$Module#queryLoad
          * @see {@link https://www.yuque.com/o2oa/ixsnyt/hm5uft#i0zTS|组件事件说明}
          */
         /**
@@ -449,18 +450,16 @@ MWF.xApplication.process.Xform.$Module = MWF.APP$Module =  new Class(
             if (evdata) evdata.check(key, v);
         }
     },
-    getBusinessDataById: function(d){
+    getBusinessDataById: function(d, id){
         var data = d || this.form.businessData.data;
-        //var evdata = this.form.Macro.environment.data;
+        var thisId = id || this.json.id;
         //对id类似于 xx..0..xx 的字段进行拆分
-        if(this.json.id.indexOf("..") < 1){
-            //if (!data.hasOwnProperty(this.json.id)) evdata.add(this.json.id, data[this.json.id]||"");
-            return data[this.json.id];
+        if(thisId.indexOf("..") < 1){
+            return data[thisId];
         }else{
-            var idList = this.json.id.split("..");
+            var idList = thisId.split("..");
             idList = idList.map( function(d){ return d.test(/^\d+$/) ? d.toInt() : d; });
 
-            //var data = this.form.businessData.data;
             var lastIndex = idList.length - 1;
 
             for(var i=0; i<=lastIndex; i++){
@@ -468,11 +467,8 @@ MWF.xApplication.process.Xform.$Module = MWF.APP$Module =  new Class(
                 if( !id && id !== 0 )return null;
                 if( ["object","array"].contains(o2.typeOf(data)) ){
                     if( i === lastIndex ){
-                        //if (!data.hasOwnProperty(id)) evdata.add(id, data[id]||"");
                         return data[id];
                     }else{
-                        //if (!data.hasOwnProperty(id)) evdata.add(id, {});
-                        //evdata = evdata[id];
                         data = data[id];
                     }
                 }else{
@@ -490,17 +486,18 @@ MWF.xApplication.process.Xform.$Module = MWF.APP$Module =  new Class(
                 evdata.check(id, v);
         }
     },
-    setBusinessDataById: function(v){
+    setBusinessDataById: function(v, id){
         debugger;
         //对id类似于 xx..0..xx 的字段进行拆分
         var evdata = this.form.Macro.environment.data;
         var data = this.form.businessData.data;
-        if(this.json.id.indexOf("..") < 1){
-            data[this.json.id] = v;
-            this._checkEvdata(evdata, this.json.id, v);
+        var thisId = id || this.json.id;
+        if(thisId.indexOf("..") < 1){
+            data[thisId] = v;
+            this._checkEvdata(evdata, thisId, v);
             //this.form.businessData.data[this.json.id] = v;
         }else{
-            var idList = this.json.id.split("..");
+            var idList = thisId.split("..");
             idList = idList.map( function(d){ return d.test(/^\d+$/) ? d.toInt() : d; });
 
             //var data = this.form.businessData.data;
diff --git a/o2web/source/x_component_process_Xform/Elcascader.js b/o2web/source/x_component_process_Xform/Elcascader.js
index 5dca7332d462e625880c556d77dc88380b151221..cb4f42ac7d28ecd99efbab2abba203cd4b92e599 100644
--- a/o2web/source/x_component_process_Xform/Elcascader.js
+++ b/o2web/source/x_component_process_Xform/Elcascader.js
@@ -139,23 +139,7 @@ MWF.xApplication.process.Xform.Elcascader = MWF.APPElcascader =  new Class(
         html += "</el-cascader >";
         return html;
     },
-    __setValue: function(value){
-        this.moduleValueAG = null;
-        this._setBusinessData(value);
-        this.json[this.json.id] = value;
-        //if (this.readonly || this.json.isReadonly) this.node.set("text", value);
-        this.fieldModuleLoaded = true;
-        return value;
-    },
-    __setData: function(data){
-        var old = this.getInputData();
-        this._setBusinessData(data);
-        this.json[this.json.id] = data;
-        //if (this.readonly || this.json.isReadonly) this.node.set("text", value);
-        if (old!==data) this.fireEvent("change");
-        this.moduleValueAG = null;
-        this.validationMode();
-    },
+    __setReadonly: function(data){},
     getCheckedNodes: function(leafOnly){
         return (this.vm) ? this.vm.getCheckedNodes(leafOnly) : null;
     }
diff --git a/o2web/source/x_component_process_Xform/Elcheckbox.js b/o2web/source/x_component_process_Xform/Elcheckbox.js
index 96348725dfa52edb6c478ac700993647462eeced..316cfbc86df03174f7675d66c6ee3d75936613fe 100644
--- a/o2web/source/x_component_process_Xform/Elcheckbox.js
+++ b/o2web/source/x_component_process_Xform/Elcheckbox.js
@@ -113,8 +113,9 @@ MWF.xApplication.process.Xform.Elcheckbox = MWF.APPElcheckbox =  new Class(
 
     _createElementHtml: function(radioValues){
         debugger;
+        this.json["$id"] = (this.json.id.indexOf("..")!==-1) ? this.json.id.replace(/\.\./g, "_") : this.json.id;
         var html = "<el-checkbox-group class='o2_vue' style='box-sizing: border-box!important'";
-        html += " v-model=\""+this.json.id+"\"";
+        html += " v-model=\""+this.json.$id+"\"";
         html += " :text-color=\"textColor\"";
         html += " :fill=\"fillColor\"";
         html += " :size=\"size\"";
@@ -196,11 +197,11 @@ MWF.xApplication.process.Xform.Elcheckbox = MWF.APPElcheckbox =  new Class(
         },
     __setValue: function(value){
         this._setBusinessData(value);
-        this.json[this.json.id] = (value) ? value : [];
+        this.json[this.json.$id] = (value) ? value : [];
     },
     __setData: function(data){
         this._setBusinessData(data);
-        this.json[this.json.id] = data;
+        this.json[this.json.$id] = data;
         this.validationMode();
         this.fireEvent("setData");
     },
@@ -256,9 +257,9 @@ MWF.xApplication.process.Xform.Elcheckbox = MWF.APPElcheckbox =  new Class(
         };
     },
     _createVueData: function(){
-        this.form.Macro.environment.data.check(this.json.id);
-        this.json[this.json.id] = this._getBusinessData();
-        if (!this.json[this.json.id] || !this.json[this.json.id].length) this.json[this.json.id] = [];
+        if (this.json.$id===this.json.id) this.form.Macro.environment.data.check(this.json.$id);
+        this.json[this.json.$id] = this._getBusinessData();
+        if (!this.json[this.json.$id] || !this.json[this.json.$id].length) this.json[this.json.$id] = [];
 
         if (this.json.vueData && this.json.vueData.code){
             var d = this.form.Macro.exec(this.json.vueData.code, this);
@@ -277,6 +278,7 @@ MWF.xApplication.process.Xform.Elcheckbox = MWF.APPElcheckbox =  new Class(
             "id": this.json.id,
             "MWFType": this.json.type
         });
+        this._loadVueCss();
         this._loadDomEvents();
         this._afterLoaded();
         this.fireEvent("postLoad");
@@ -284,7 +286,15 @@ MWF.xApplication.process.Xform.Elcheckbox = MWF.APPElcheckbox =  new Class(
     },
 
     getInputData: function(){
-        return this.json[this.json.id];
+        return this.json[this.json.$id];
     },
-
+    _loadVueCss: function(){
+        if (this.styleNode){
+            this.node.removeClass(this.styleNode.get("id"));
+        }
+        if (this.json.vueCss && this.json.vueCss.code){
+            this.styleNode = this.node.loadCssText(this.json.vueCss.code, {"notInject": true});
+            this.styleNode.inject(this.node, "before");
+        }
+    }
 }); 
diff --git a/o2web/source/x_component_process_Xform/Elcommon.js b/o2web/source/x_component_process_Xform/Elcommon.js
index c63704812f11238a3d805c0764aa666fece9fa75..7a8715e0f33923981b7cdc4644f1bf03e2208544 100644
--- a/o2web/source/x_component_process_Xform/Elcommon.js
+++ b/o2web/source/x_component_process_Xform/Elcommon.js
@@ -77,11 +77,17 @@ o2.xApplication.process.Xform.Elcommon = o2.APPElcommon =  new Class(
     // },
 
     _createVueExtend: function(){
-        if (this.tmpVueData){
-            Object.keys(this.tmpVueData).each(function(k){
-                this.form.Macro.environment.data.check(k, this.tmpVueData[k]);
+        // if (this.tmpVueData){
+        //     Object.keys(this.tmpVueData).each(function(k){
+        //         this.form.Macro.environment.data.check(k, this.tmpVueData[k]);
+        //     }.bind(this));
+        // }
+        if (this.vModels && this.vModels.length){
+            this.vModels.forEach(function(m){
+                if (!this.json.hasOwnProperty(m)) this.json[m] = "";
             }.bind(this));
         }
+
         var app = {};
         if (this.json.vueApp && this.json.vueApp.code) app = this.form.Macro.exec(this.json.vueApp.code, this);
         if (app.data){
@@ -89,9 +95,10 @@ o2.xApplication.process.Xform.Elcommon = o2.APPElcommon =  new Class(
             switch (ty){
                 case "object":
                     Object.keys(app.data).each(function(k){
-                        this.form.Macro.environment.data.add(k, app.data[k]);
+                        if (!this.json.hasOwnProperty(k)) this.json[k] = app.data[k];
+                        //this.form.Macro.environment.data.add(k, app.data[k]);
                     }.bind(this));
-                    app.data = this.form.Macro.environment.data;
+                    app.data = this.this.json;
                     // app.data = this.json;
                     // app.data = Object.merge(this.json, this.form.Macro.environment.data);
                     break;
@@ -104,15 +111,18 @@ o2.xApplication.process.Xform.Elcommon = o2.APPElcommon =  new Class(
                         //_self.form.Macro.environment.data.add(_self.json.id, d);
 
                         Object.keys(d).each(function(k){
-                            _self.form.Macro.environment.data.add(k, d[k]);
+                            if (!_self.json.hasOwnProperty(k)) _self.json[k] = d[k];
+                            //_self.form.Macro.environment.data.add(k, d[k]);
                         });
                         //var data = Object.merge(_slef.json);
-                        return _self.form.Macro.environment.data;
+                        //return _self.form.Macro.environment.data;
+                        return _self.json;
                     };
                     break;
             }
         }else{
-            app.data = this.form.Macro.environment.data;
+            //app.data = this.form.Macro.environment.data;
+            app.data = this.json;
         }
 
         var _self = this;
@@ -121,6 +131,9 @@ o2.xApplication.process.Xform.Elcommon = o2.APPElcommon =  new Class(
             _self._afterMounted(this.$el);
             if (mountedFun && o2.typeOf(mountedFun)=="function") return mountedFun.apply(this);
         };
+
+        this.appendVueWatch(app);
+
         return app;
     },
 
@@ -142,17 +155,34 @@ o2.xApplication.process.Xform.Elcommon = o2.APPElcommon =  new Class(
     //         this.styleNode.inject(this.node, "before");
     //     }
     // },
-    _filterHtml: function(html){
-        var tmp = new Element("div", {"html": html});
-        var nodes = tmp.querySelectorAll("*[v-model]");
-        this.tmpVueData = {};
-        nodes.forEach(function(node){
-            this.tmpVueData[node.get("v-model")] = "";
-        }.bind(this));
-        return html;
+    // _filterHtml: function(html){
+    //     var tmp = new Element("div", {"html": html});
+    //     var nodes = tmp.querySelectorAll("*[v-model]");
+    //     this.tmpVueData = {};
+    //     nodes.forEach(function(node){
+    //         this.tmpVueData[node.get("v-model")] = "";
+    //     }.bind(this));
+    //     return html;
+    // },
+    _checkVmodel: function(text){
+        if (text){
+            this.vModels = [];
+            var reg = /(?:v-model)(?:.lazy|.number|.trim)?(?:\s*=\s*)(?:["'])?([^"']*)/g;
+            var arr;
+            while ((arr = reg.exec(text)) !== null) {
+                if (arr.length>1 && arr[1]){
+                    var modelId = this.json.id.substring(0, this.json.id.lastIndexOf(".."));
+                    modelId = (modelId) ? modelId+".."+arr[1] : arr[1];
+                    this.json[arr[1]] = this.getBusinessDataById(null, modelId);
+                    this.vModels.push(arr[1]);
+                }
+            }
+        }
     },
     _createElementHtml: function(){
         var html = this.json.vueTemplate || "";
-        return this._filterHtml(html);
+        if (html) this._checkVmodel(html);
+        // return this._filterHtml(html);
+        return html;
     }
 }); 
diff --git a/o2web/source/x_component_process_Xform/Elinput.js b/o2web/source/x_component_process_Xform/Elinput.js
index a50b0cc893f3142268ed1875a1e98e62865d6493..e9947751d4f0e3366c2eefb4590a14a19b12a39b 100644
--- a/o2web/source/x_component_process_Xform/Elinput.js
+++ b/o2web/source/x_component_process_Xform/Elinput.js
@@ -21,11 +21,6 @@ MWF.xApplication.process.Xform.Elinput = MWF.APPElinput =  new Class(
         "elEvents": ["focus", "blur", "change", "input", "clear"]
     },
     _appendVueData: function(){
-        this.form.Macro.environment.data.check(this.json.id);
-        //if (!this.json[this.json.id]){
-            this.json[this.json.id] = this._getBusinessData();
-        //}
-
         if (!this.json.maxlength) this.json.maxlength = "";
         if (!this.json.minlength) this.json.minlength = "";
         if (!this.json.showWordLimit) this.json.showWordLimit = false;
@@ -52,8 +47,9 @@ MWF.xApplication.process.Xform.Elinput = MWF.APPElinput =  new Class(
     //     }.bind(this);
     // },
     _createElementHtml: function(){
+        debugger;
         var html = "<el-input";
-        html += " v-model=\""+this.json.id+"\"";
+        html += " v-model=\""+this.json.$id+"\"";
         html += " :maxlength=\"maxlength\"";
         html += " :minlength=\"minlength\"";
         html += " :show-word-limit=\"showWordLimit\"";
diff --git a/o2web/source/x_component_process_Xform/Elradio.js b/o2web/source/x_component_process_Xform/Elradio.js
index 9a7fb4a4c1a1897283fddc8b29aa9555851eabe0..1530cb6ec995439ef590d7ef48f9cc10fe532571 100644
--- a/o2web/source/x_component_process_Xform/Elradio.js
+++ b/o2web/source/x_component_process_Xform/Elradio.js
@@ -98,8 +98,10 @@ MWF.xApplication.process.Xform.Elradio = MWF.APPElradio =  new Class(
     },
 
     _createElementHtml: function(radioValues){
+        this.json["$id"] = (this.json.id.indexOf("..")!==-1) ? this.json.id.replace(/\.\./g, "_") : this.json.id;
+
         var html = "<el-radio-group class='o2_vue' style='box-sizing: border-box!important'";
-        html += " v-model=\""+this.json.id+"\"";
+        html += " v-model=\""+this.json.$id+"\"";
         html += " :text-color=\"textColor\"";
         html += " :fill=\"fillColor\"";
         html += " :size=\"size\"";
@@ -157,12 +159,12 @@ MWF.xApplication.process.Xform.Elradio = MWF.APPElradio =  new Class(
     __setValue: function(value){
         this.moduleValueAG = null;
         this._setBusinessData(value);
-        this.json[this.json.id] = value;
+        this.json[this.json.$id] = value;
     },
     __setData: function(data){
         this.moduleValueAG = null;
         this._setBusinessData(data);
-        this.json[this.json.id] = data;
+        this.json[this.json.$id] = data;
         this.validationMode();
         this.fireEvent("setData");
     },
@@ -219,8 +221,8 @@ MWF.xApplication.process.Xform.Elradio = MWF.APPElradio =  new Class(
         };
     },
     _createVueData: function(){
-        this.form.Macro.environment.data.check(this.json.id);
-        this.json[this.json.id] = this._getBusinessData();
+        if (this.json.$id===this.json.id) this.form.Macro.environment.data.check(this.json.$id);
+        this.json[this.json.$id] = this._getBusinessData();
         // if (!this.json[this.json.id]){
         //     this.json[this.json.id] = this._getBusinessData();
         // }
@@ -236,12 +238,14 @@ MWF.xApplication.process.Xform.Elradio = MWF.APPElradio =  new Class(
 
         return this.json;
     },
+
     _afterMounted: function(el){
         this.node = el;
         this.node.set({
             "id": this.json.id,
             "MWFType": this.json.type
         });
+        this._loadVueCss();
         this._loadDomEvents();
         this._afterLoaded();
         this.fireEvent("postLoad");
@@ -249,7 +253,15 @@ MWF.xApplication.process.Xform.Elradio = MWF.APPElradio =  new Class(
     },
 
     getInputData: function(){
-        return this.json[this.json.id];
+        return this.json[this.json.$id];
     },
-
+    _loadVueCss: function(){
+        if (this.styleNode){
+            this.node.removeClass(this.styleNode.get("id"));
+        }
+        if (this.json.vueCss && this.json.vueCss.code){
+            this.styleNode = this.node.loadCssText(this.json.vueCss.code, {"notInject": true});
+            this.styleNode.inject(this.node, "before");
+        }
+    }
 }); 
diff --git a/o2web/source/x_component_process_Xform/Elselect.js b/o2web/source/x_component_process_Xform/Elselect.js
index 02da9bcf788e8223191d000a06d302d2c2196453..d68dab8a12355ce4ff52e2616f5bce757b895f26 100644
--- a/o2web/source/x_component_process_Xform/Elselect.js
+++ b/o2web/source/x_component_process_Xform/Elselect.js
@@ -171,21 +171,5 @@ MWF.xApplication.process.Xform.Elselect = MWF.APPElselect =  new Class(
         html += "</el-select>";
         return html;
     },
-    __setValue: function(value){
-        this.moduleValueAG = null;
-        this._setBusinessData(value);
-        this.json[this.json.id] = value;
-        //if (this.readonly || this.json.isReadonly) this.node.set("text", value);
-        this.fieldModuleLoaded = true;
-        return value;
-    },
-    __setData: function(data){
-        var old = this.getInputData();
-        this._setBusinessData(data);
-        this.json[this.json.id] = data;
-        //if (this.readonly || this.json.isReadonly) this.node.set("text", value);
-        if (old!==data) this.fireEvent("change");
-        this.moduleValueAG = null;
-        this.validationMode();
-    },
+    __setReadonly: function(data){}
 }); 
diff --git a/o2web/source/x_component_process_Xform/Elslider.js b/o2web/source/x_component_process_Xform/Elslider.js
index 0b8f878ac635b924bce65b6a9bb93d9a66023045..780e5f8fe21525f248d039f8b237e62c234bd96f 100644
--- a/o2web/source/x_component_process_Xform/Elslider.js
+++ b/o2web/source/x_component_process_Xform/Elslider.js
@@ -127,19 +127,5 @@ MWF.xApplication.process.Xform.Elslider = MWF.APPElslider =  new Class(
         html += "</el-slider>";
         return html;
     },
-    __setValue: function(value){
-        this.moduleValueAG = null;
-        this._setBusinessData(value);
-        this.json[this.json.id] = value;
-        this.fieldModuleLoaded = true;
-        return value;
-    },
-    __setData: function(data){
-        var old = this.getInputData();
-        this._setBusinessData(data);
-        this.json[this.json.id] = data;
-        if (old!==data) this.fireEvent("change");
-        this.moduleValueAG = null;
-        this.validationMode();
-    },
+    __setReadonly: function(data){}
 }); 
diff --git a/o2web/source/x_component_process_Xform/Elswitch.js b/o2web/source/x_component_process_Xform/Elswitch.js
index 6e1785dcd3142f14b54c16c6d350fa8aff3e50ab..d12df79684790436f0ca8cf39a14ebc1f7cab110 100644
--- a/o2web/source/x_component_process_Xform/Elswitch.js
+++ b/o2web/source/x_component_process_Xform/Elswitch.js
@@ -126,19 +126,5 @@ MWF.xApplication.process.Xform.Elswitch = MWF.APPElswitch =  new Class(
         html += "</el-switch>";
         return html;
     },
-    __setValue: function(value){
-        this.moduleValueAG = null;
-        this._setBusinessData(value);
-        this.json[this.json.id] = value;
-        this.fieldModuleLoaded = true;
-        return value;
-    },
-    __setData: function(data){
-        var old = this.getInputData();
-        this._setBusinessData(data);
-        this.json[this.json.id] = data;
-        if (old!==data) this.fireEvent("change");
-        this.moduleValueAG = null;
-        this.validationMode();
-    },
+    __setReadonly: function(data){}
 }); 
diff --git a/o2web/source/x_component_process_Xform/Form.js b/o2web/source/x_component_process_Xform/Form.js
index 72dbe71c56ace6a7b541c65d4c9fc0b5bb3dbdb8..c17cfeb5fc199ced7fbb20f88d65a6eb802a74fe 100644
--- a/o2web/source/x_component_process_Xform/Form.js
+++ b/o2web/source/x_component_process_Xform/Form.js
@@ -1486,9 +1486,11 @@ MWF.xApplication.process.Xform.Form = MWF.APPForm = new Class(
         pathList = pathList || [];
         if (typeOf(data) === "object") {
             for (var key in data) {
+                //if (key.substring(0,2)!=="__"){
                 var pList = Array.clone(pathList);
                 pList.push(key);
                 this.setModifedData(data[key], pList);
+                //}
             }
         } else if (typeOf(data) === "array") {
             var od = this.getOrigianlPathData(pathList);