Weird rendering of simple graph in Vue

[inc0]

Hello! Trying to render simple graph, but it doesn't behave like it should.

var nodes = {
        "nodes": [
            "node1",
            "node2",
            "node3",
            "node4",
            "node5",     
        ],
        "edges": [
            ["node1", "node2"],
            ["node2", "node3"],
            ["node2", "node4"],
            ["node4", "node5"]
        ]
    }
function draw_graph() {
    var dagreD3 = require("dagre-d3");
    var d3 = require("d3");

    var g = new dagreD3.graphlib.Graph()
    g.setGraph({}).setDefaultEdgeLabel(function() { return {}; });

    nodes.nodes.map((n) => g.setNode(n, {label: n, width: 100, height: 150}));
    nodes.edges.map((e) => g.setEdge(e[0], e[1]));

    var render = new dagreD3.render();
    render(d3.select("svg"), g);
    console.log(g);
}

And styles:

<style scoped>
.node rect {
  stroke: rgb(214, 48, 48);
  fill: #fff;
}

.edgePath path {
  stroke: rgb(41, 184, 60);
  fill: rgb(187, 78, 78);
  stroke-width: 1.5px;
}
</style>

I run func draw_graph on mount in Vue, this is result:

How to debug this? No errors are shown

[inc0]

Made progress on this. Turns out that vues scoped style made it break. If you remove scoped, it works.

[alfredocovaDS]

thanks for the notice, did you ran into something else while working in Vue? I'm about to start working with this library, any advice would be helpful.