vue и d3 принудительная компоновка, визуализация сети

Итак, я новичок в d3 и очень мало экспериментировал с vue.

Что я хочу сделать, так это отобразить сеть после того, как данные были получены в компоненте vue.

Я попытался воссоздать некоторые старые коды, касающиеся макета vue и d3 force, и попытался адаптировать этот пример, но ни один из них не сработал, и я действительно не знаю, почему.

Ближе всего к тому, что я хочу, это, вероятно, этот ответ , но я хочу, чтобы он отображался после получения данных.

Мой код сейчас выглядит так:

<script>
  import * as d3 from "d3";
  export default {
    name: "MapComponent",
    data() {
      return {
        mapData: {}
      };
    },
    created() {
      this.mapdataget();
    },
    computed() {
      this.data_vis();
    },
    methods: {
      mapdataget: function () {
        this.$store
          .dispatch("mapData_get")
          .then(() => {
            this.mapData = this.$store.getters.mapData;
          })
          .catch();
      },
      data_vis() {
        let nodes = this.mapData.nodes;
        let links = this.mapData.links;
        let svg = d3.select("svg")
        this.simulation = d3.forceSimulation()
          .force("link", d3.forceLink().id(function (d) {
            return d.id;
          }))
          .force("charge", d3.forceManyBody())
        let link = svg.append("g")
          .attr("class", "links")
          .selectAll("line")
          .data(links) //graph.links)
          .enter().append("line")
          .attr("stroke-width", function (d) {
            return Math.sqrt(d.value);
          });
        let node = svg.append("g")
          .attr("class", "nodes")
          .selectAll("circle")
          .data(nodes) //graph.nodes)
          .enter().append("circle")
          .attr("r", 5)
          .call(d3.drag()
            .on("start", this.dragstarted)
            .on("drag", this.dragged)
            .on("end", this.dragended));
        node.append("title")
          .text(function (d) {
            return d.id;
          });
        this.simulation
          .nodes(nodes)
          .on("tick", ticked);
        this.simulation.force("link")
          .links(links); //graph.links);
        function ticked() {
          link
            .attr("x1", function (d) {
              return d.source.x;
            })
            .attr("y1", function (d) {
              return d.source.y;
            })
            .attr("x2", function (d) {
              return d.target.x;
            })
            .attr("y2", function (d) {
              return d.target.y;
            });
          node
            .attr("cx", function (d) {
              return d.x;
            })
            .attr("cy", function (d) {
              return d.y;
            });
        }
      }
    }
  }
</script>

с mapData, выглядящим так:

const mapData = {
  'nodes': [{
    'id':String
    }, and more],
  'links': [{
    'id':String,
    'source': sourceNodeId,
    'target': targetNodeId
    }, and more]
  }

а шаблон vue — это svg:

<template>
  <svg class='svg'></svg>
</template>

И я получил ошибку:

[Предупреждение Vue]: недопустимое значение параметра «вычислено»: ожидался объект, но получена функция.