Javascript 如何根据Vuelayer中的GeoJSON绘制所有国家的边界？

我想在Vuelayer（openlayer软件包的vue库）中显示国家边界。但它不起作用

我使用以下网站生成了所有国家的GeoJson

我遵循了文档 我使用for循环获得每个坐标，以获得所有国家的边界，但它不起作用

当我使用一个国家的一个坐标而不使用for循环时，它是有效的

我想让它显示所有国家的边界。但它没有显示任何东西

<vl-layer-tile>
  <vl-source-osm></vl-source-osm>
</vl-layer-tile>

<vl-feature id="polygon">
  <vl-geom-polygon v-for="(data, index) in geoJSON" :coordinates="data.geometry.coordinates"></vl-geom-polygon>
</vl-feature>

import countrieslowJson from "../assets/GeoJSON/counties_lowRes.json";

Vue.use(VueLayers);

export default {
  components: {},
  data() {
    return {
      zoom: 3,
      center: [-98.8449,19.6869],
      rotation: 0,
      geolocPosition: undefined,
      geoJSON: countrieslowJson.features.properties
    };
  },
  props: [],
  methods: {}
};