SOURCE

Vue.directive('jqgrid',
              function (el,binding,vnode)
                {
  console.log(el); 
                  console.log("jqgrid directive:#"+el.id)
                  console.log(binding);
                    $("#"+el.id).jqGrid({
                          //data: mydata, // doesn't work
                          datatype: "local",
                          editurl: 'clientArray',
                          cellSubmit: 'clientArray',
                          colNames: ['a', 'b', 'c', 'd'],
                          colModel: [
                          { name:'a',index:'a', width:60, sorttype: "int"},
                          { name: 'b', index: 'b', width: 180, sorttype: "string"},
                          { name: 'c', index: 'c', width: 120, sorttype: "float",editable:true },
                          { name: 'd', index: 'd', width: 120, sorttype: "string",editable:true } ],

                          loadonce: true,
                          pager : "#gridPager2",
                          caption: "aaaaaa",
                          onSelectRow: function(id){
                            if(id && id!==lastsel){
                              console.log("click on edit."+ lastsel)
                              $("#"+el.id).jqGrid('saveRow',lastsel);
                              $("#"+el.id).jqGrid('editRow',id,true);
                              lastsel=id;
                            }

                          }
                      });       
  		
  $("#"+el.id).jqGrid("setGridParam",{
  					datatype: 'local',
            data:uidata.bill.fentity
				}).trigger("reloadGrid");
})


var lastsel;

var mydata = {
  "f1":"hello,world",
  "f2":123,
  "f3":new Date(),
  "fentity":[
    {id: "1", label:"No 1", number:"02200220", status:"OPEN", level:"0", parent: "", isLeaf: false, expanded:true, loaded:true},
    {id: "2", label:"No 2", number:"77733337", status:"ENTERED", level:"0", parent: "", isLeaf: false, expanded:true, loaded:true},
    {id: "6", label:"No 2a", number:"12345123", status:"WIRED", level:"1", parent: "2", isLeaf: true, expanded:false, loaded:true},
    {id: "3", label:"No 3", number:"02200111", status:"OPEN", level:"0", parent: "", isLeaf: false},
    {id: "4", label:"No 1a", number:"02200221", status:"OPEN", level:"1", parent: "1", isLeaf: true, expanded:false, loaded:true},
    {id: "5", label:"No 1b", number:"02242320", status:"CLOSED", level:"1", parent: "1", isLeaf: true, expanded:false, loaded:true}
]};

var uidata={"bill":mydata};

var vm = new Vue({
  el: '#app',
  data: uidata
});


$("#btnSetString").on("click",function()
                     {
  //here,it can not fire the vm.$watch,why？
  $("div#app #f1").val("test2");
  console.log(uidata.bill.f1);
})

var grid = $("#grid");

$("#btnPrintGridModel").on("click",function()
                     {  
  var data=grid.jqGrid("getGridParam");
  console.log(data);
  console.log(uidata.bill.fentity);
})

grid.jqGrid({
    //data: mydata, // doesn't work
    datatype: "local",
  	editurl: 'clientArray',
  	cellSubmit: 'clientArray',
    colNames: ['Id', 'Label', 'Number', 'Status'],
    colModel: [
    { name:'id',index:'id', width:60, sorttype: "int"},
    { name: 'label', index: 'label', width: 180, sorttype: "string"},
    { name: 'number', index: 'number', width: 120, sorttype: "float",editable:true },
    { name: 'status', index: 'status', width: 120, sorttype: "string",editable:true } ],
    
    loadonce: true,
    pager : "#gridPager",
    caption: "Stack Overflow Adjacency Example",
    onSelectRow: function(id){
      if(id && id!==lastsel){
        console.log("click on edit."+ lastsel)
        grid.jqGrid('saveRow',lastsel);
        grid.jqGrid('editRow',id,true);
        lastsel=id;
      }
    }

});

grid.jqGrid("setGridParam",{
  datatype: 'local',
            data:uidata.bill.fentity
}).trigger("reloadGrid");

grid.navGrid('#gridPager',
                // the buttons to appear on the toolbar of the grid
                { edit: true, add: true, del: true, search: false, refresh: false, view: false, position: "left", cloneToTop: false },
                // options for the Edit Dialog
                {
                    editCaption: "The Edit Dialog",
                    recreateForm: true,
					checkOnUpdate : true,
					checkOnSubmit : true,
                    closeAfterEdit: true,
                    errorTextFormat: function (data) {
                        return 'Error: ' + data.responseText
                    }
                },
                // options for the Add Dialog
                {
                    closeAfterAdd: true,
                    recreateForm: true,
                    errorTextFormat: function (data) {
                        return 'Error: ' + data.responseText
                    }
                },
                // options for the Delete Dailog
                {
                    errorTextFormat: function (data) {
                        return 'Error: ' + data.responseText
                    }
                });

<div id="app">
<table id="grid"></table>
<div id="gridPager"></div>
  <button id='btnPrintGridModel'>打印表格数据源</button>
<br/>
<a href="http://www.ok-soft-gmbh.com/jqGrid/LocalAdjacencyTree4.htm">Another local adjaceny example</a>
  <table id="grid2" v-jqgrid="{x:'xx'}"></table>
  <div id="gridPager2"></div>
<br><br>
  <input id="f1" v-model="bill.f1" placeholder="请输入一个字符串"/> <button id="btnSetString">动态赋值</button><p></p>
  <input id="f2" v-model="bill.f2" type="numeric" placeholder="请输入一个数字"/>
  <input id="f2" v-model="bill.f3" type="date" placeholder="请输入一个日期"/>
  <br>
  <br>
  
</div>