Problem when displaying lines and points (json) on OpenLayers Vue 3 js

I’m trying to display on an OpenLayers Map some points and lines using Vue js 3 but there is and "invalid type" issue that I could’nt solve. Here is the warning message on console log :

runtime-core.esm-bundler.js:40 [Vue warn]: Invalid prop: type check failed for prop "coordinates". Expected Array, got Object  
  at <OlGeomMultiLineString coordinates= {type: 'FeatureCollection', features: Array(58)} > 
  at <OlFeature> 
  at <OlSourceVector> 
  at <OlVectorLayer> 
  at <OlMap style= {height: '400px'} > 
  at <Map key=0 geoJsonArretList= {type: 'FeatureCollection', features: Array(60)} geoJsonMouvementList= {type: 'FeatureCollection', features: Array(58)} > 
  at <VCardItem> 
  at <VCard height="100%" width="200%" > 
  at <VContainer class="justify-center d-flex" > 
  at <Dashboard.vue onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {addBlock: ƒ, removeBlock: ƒ, validateTraces: ƒ, getData: ƒ, …} > > 
  at <RouterView> 
  at <VMain> 
  at <View key=0 > 
  at <VApp> 
  at <Default onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {__v_skip: true} > > 
  at <RouterView> 
  at <App>

My template is defined as following :

<template>
  <ol-map style="height:400px">
    <ol-view
      ref="view"
      :center="center"
      :rotation="rotation"
      :zoom="zoom"
      :projection="projection"
      @zoomChanged="zoomChanged"
      @centerChanged="centerChanged"
      @resolutionChanged="resolutionChanged"
      @rotationChanged="rotationChanged"
    />

    <ol-zoom-control />

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

    <ol-vector-layer>
      <ol-source-vector>
        <ol-feature>
          <ol-geom-multi-point :coordinates="geoJsonArretList"></ol-geom-multi-point>
          <ol-geom-multi-line-string :coordinates="geoJsonMouvementList"></ol-geom-multi-line-string>
        </ol-feature>
      </ol-source-vector>
    </ol-vector-layer>
  </ol-map>
</template>

The problem is located at the ol-source-vector line. The props received (geoJsonArretList and geoJsonMouvementList) are of type :

{
type : "FeatureCollection", 
features: Array(60)
0: {type: "Feature", geometry:{...}, properties: {...}}
1: ...
}

I tried saving my data (for example geoJsonArretList) as a .json file but the component couldn’t access the file.
I tried modifying the props received (geoJsonArretList for example) forcing the Object to become an Array but the component couldn’t read it neither.

>Solution :

It looks like you’re trying to pass a GeoJSON object as the coordinates prop for the ol-geom-multi-point and ol-geom-multi-line-string components. However, these components expect an array of coordinates. You should extract the coordinates from your GeoJSON data and pass them to the components.

Here’s how you can do this in the Vue 3 script section:

computed: {
  arretCoordinates() {
    return this.geoJsonArretList.features.map(feature => feature.geometry.coordinates);
  },
  mouvementCoordinates() {
    return this.geoJsonMouvementList.features.map(feature => feature.geometry.coordinates);
  }
}

Now you should have two computed properties, arretCoordinates and mouvementCoordinates, which should be arrays of coordinates. Pass these computed properties to your ol-geom-multi-point and ol-geom-multi-line-string components like this:

<ol-vector-layer>
  <ol-source-vector>
    <ol-feature>
      <ol-geom-multi-point :coordinates="arretCoordinates"></ol-geom-multi-point>
      <ol-geom-multi-line-string :coordinates="mouvementCoordinates"></ol-geom-multi-line-string>
    </ol-feature>
  </ol-source-vector>
</ol-vector-layer>

Now you should have the correct data types for your coordinates props, and the warning should disappear. Note that this assumes your GeoJSON data is valid and has the correct structure.