Elbow edge does not show when use mxgraph with vue

[soon08]

After i drag edge and save xml, mxgraph does not show edge any more.

version:
"mxgraph": "^4.1.0",
"vue": "^2.5.16"

data() {
    return {
      graph: null,
      xml: ''
    };
  },
  mounted() {
    if (!mxClient.isBrowserSupported()) {
      // 判断是否支持mxgraph
      mxUtils.error('Browser is not supported!', 200, false);
    } else {
      // 再容器中创建图表
      let container = document.getElementById('graphContainer');
      this.graph = this.createGraph(container);
    }
  },
  methods: {
    createGraph(container) {
      // 再容器中创建图表
      let MxGraph = mxGraph;
      var graph = new MxGraph(container);

      let style = graph.getStylesheet().getDefaultEdgeStyle();
      style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR] = '#FFFFFF';
      style[mxConstants.STYLE_STROKECOLOR] = '#ccc';
      style[mxConstants.STYLE_STROKEWIDTH] = '2';
      style[mxConstants.STYLE_ROUNDED] = true;
      // style[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation;
      // 设置连线样式为有拐点，连线可以在拐点处拖拽，使流程图更清晰美观
      style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector; //有拐点的连线
      graph.getStylesheet().putDefaultEdgeStyle(style);

      return graph;
    },
    //加载数据
    loadData() {
      var doc = mxUtils.parseXml(this.xml);
      let MxCodec = mxCodec;
      var codec = new MxCodec(doc);
      codec.decode(doc.documentElement, this.graph.getModel());
    },

    //保存数据
    saveData() {
      let MxCodec = mxCodec;
      let enc = new MxCodec();
      let node = enc.encode(this.graph.getModel());
      let xml = mxUtils.getXml(node);
      console.log(xml);
    }
  }

xml:

<?xml version="1.0" encoding="utf-8"?>

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <mxCell id="2" value="新建" style="style1" parent="1" vertex="1">
      <mxGeometry x="430" y="210" width="120" height="40" as="geometry"/>
    </mxCell>
    <mxCell id="6" value="完成" style="style1" parent="1" vertex="1">
      <mxGeometry x="690" y="210" width="120" height="40" as="geometry"/>
    </mxCell>
    <mxCell id="7" value="提交" parent="1" source="2" target="6" edge="1">
      <mxGeometry relative="1" as="geometry">
        <Array as="points">
          <mxPoint x="630" y="300"/>
        </Array>
      </mxGeometry>
    </mxCell>
    <mxCell id="8" value="驳回" parent="1" source="6" target="2" edge="1">
      <mxGeometry relative="1" as="geometry">
        <Array as="points">
          <mxPoint x="620" y="160"/>
        </Array>
      </mxGeometry>
    </mxCell>
  </root>
</mxGraphModel>

[soon08]

i found my xml didn't decode successfully, mxPoint can not be transferred to Object.
something wrong happened here:

Then i resolved this issue by modified mxgraph.js

import mx from 'mxgraph';
const mxgraph = mx({
  mxImageBasePath: './src/images',
  mxBasePath: './src'
});
// decode bug https://github.com/jgraph/mxgraph/issues/49
window.mxGraph = mxgraph.mxGraph;
window.mxGraphModel = mxgraph.mxGraphModel;
// import mxPoint into window
window.mxPoint = mxgraph.mxPoint;
window.mxEditor = mxgraph.mxEditor;
window.mxGeometry = mxgraph.mxGeometry;
window.mxDefaultKeyHandler = mxgraph.mxDefaultKeyHandler;
window.mxDefaultPopupMenu = mxgraph.mxDefaultPopupMenu;
window.mxStylesheet = mxgraph.mxStylesheet;
window.mxDefaultToolbar = mxgraph.mxDefaultToolbar;
window.mxFastOrganicLayout = mxgraph.mxFastOrganicLayout;

export default mxgraph;