Vis.js Network Dont Show Multilines Between Nodes

I am using vue.js and vis.js netwrok and i am stuck with a problem that i cant solve. The problem is that i have two nodes and between them there are several connections but it show like its one connection and i want to see all those connection.

this is the nodes array:

var nodes = new vis.DataSet([
  {id: 1, label: 'Node 1'},
  {id: 2, label: 'Node 2'},
]);


var edges = new vis.DataSet([
  {from: 1, to: 2, label: "1gb bandwith"},
  {from: 1, to: 2, label: "10gb betwith"},
  {from: 2, to: 1, label: "down"},
  {from: 2, to: 1, label: "up"},
]);

my option setting look like this:

    mapOption:{
        nodes: {
          color: "black",
          shadow: {
            enabled: true,
          },
          font: {
            face: "Source Han Serif CN",
            color: "black",
          },
        },
        edges: {
          arrows: {
            from: {enabled: false , type:'circle'},
            to: {enabled: false , type:'circle'},
            middle: {enabled: true , type:'circle'},
          },
          smooth: { enabled: false},
          width: 1.5,
          color: {
            color: 'black',
            highlight: 'black'
          },
        },

        physics: {
          enabled: false,
        },


        interaction: {
            hover: true,
            dragNodes:true,
            dragView: true,
            hoverConnectedEdges: true,
            selectable: true,
            selectConnectedEdges: true,
        },

        manipulation: {
            enabled: false,
        },
    },

link to the imgae of what i got

any one know how to fix this issuse?