vue3-Openlayers: Change Feature color according to properties on the fly from template

Question

I have these features

 <ol-vector-layer title="Features" :visible="vectorMenuDisplay" >
    <ol-source-vector ref="sourceVectorNew" :projection="projection" :features="existingFeatures">
      <ol-interaction-modify v-if="!mapLock && modifyEnabled" :features="selectedFeatures" @modifyend="modifyend"></ol-interaction-modify>
      <ol-interaction-draw v-if="!mapLock && drawEnable" :type="drawType" @drawend="drawend"></ol-interaction-draw>
    </ol-source-vector>
    <ol-style>
      <ol-style-stroke color="red" :width="5"></ol-style-stroke>
      <ol-style-fill color="rgba(255,255,255,0.1)"></ol-style-fill>
      <ol-style-circle :radius="7">
        <ol-style-fill color="green"></ol-style-fill> 
        // this color should be from extra data in properties of the feature
      </ol-style-circle>
    </ol-style>
  </ol-vector-layer>

I would like to change the color="green" dynamically depending on the changing state of its associated informations that is separate and stored in the feature properties values

Update: I used this function from answer below but always get a single color (the first one of the list) at the output even that the color is right in function

const overrideStyleFunction = (feature, style) => {
  const difficulty = feature.get('difficulty');
  const mode = feature.get('mode')
  let color = getPointColor(mode, difficulty)
  console.log(color) // getting 'red', 'blue', etc...
  style.getImage().getFill().setColor(color); // wrong color in style after first; they are all same color as first
}

Answer 1

you can add overrideStyleFunction prop to style like that

 <ol-style :overrideStyleFunction="overrideStyleFunction">
            <ol-style-stroke color="red" :width="2"></ol-style-stroke>
            <ol-style-fill color="rgba(255,255,255,0.1)"></ol-style-fill>

            <ol-style-circle :radius="20">
                <ol-style-stroke color="black" :width="15" :lineDash="[]" lineCap="butt"></ol-style-stroke>
                <ol-style-fill color="black"></ol-style-fill>
            </ol-style-circle>

            <ol-style-text>
                <ol-style-fill color="white"></ol-style-fill>
            </ol-style-text>
        </ol-style>

In script :

   const overrideStyleFunction = (feature, style) => {

       let properties= feature.get('bla bla bla');  //from extra data in properties of the feature
       if(properties == "....") // change the style
           style.getImage().getFill().setColor("red");
    
    }