How to draw all countries boundaries according to GeoJSON in Vuelayer?

Question

I want to show the countries' boundaries in the Vuelayer (a vue library for openlayer package). But It doesn't work

I used the following website to generate GeoJson of all the countries. https://geojson-maps.ash.ms/

I followed the documentation https://vuelayers.github.io/#/component/polygon-geom I used the for loop to get each coordinate to get boundaries of all countries, but it doesn't work.

When I use one coordinate of one country without for loop, it works

<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: {}
};

I want it to show all the boundaries of countries. but it doesn't show anything