vue3-openlayers - direction arrow on lineString as a single feature

Question

I am trying to create a map which takes coordinates and displays a line on the map with a direction arrow from end point to start in the middle.

Now I am trying to add interaction in it so when a user selects the line or the arrow, it should be selected as a single feature.

Currently my line and arrow are selected separately because I am actually using them as different features in a layer.

How can I have the line and arrow as a single feature in vue3-openlayers specifically?

My main goal is to make the line and arrow selected together as a single feature. I have seen examples of open layers code but don't know how to use them with vue3-openlayers.

Any help or guidance related to what I need to learn to implement it is appreciated.

Below is my template code:

<div v-for="(data, index) in [[0.1,0.2], [0.3,0.4]" :key="index">
  <ol-feature>
    <ol-geom-line-string :coordinates="data"> </ol-geom-line-string>
      <ol-style>
        <ol-style-stroke
           color="purple"
           width="4"
        ></ol-style-stroke>
      </ol-style>
  </ol-feature>

  <ol-feature>
    <ol-geom-point
      :coordinates="calculateMidpoint(data)"
    ></ol-geom-point>
    <ol-style>
      <ol-style-icon
        :src="arrowIcon"
        :scale="0.06"
        :color="purple"
        :rotation="calculateRotation(data)"
      ></ol-style-icon>
    </ol-style>
  </ol-feature>
</div>