vue 3, it is possible v-for “sortedBy” or “orderBy”?

Okay so I was doing my research and I found something but in vue 2, which is quite interesting, however doesn’t seems to be possible for the vue 3(I tested it already). See the reference on here

However myself I was trying to do something “quite experimental”

So see below my “v-for”

                <span
                  v-for="model in sortIndex(colour.relatedModels)"
                  :key="model.id"
                  :style="{ color: colour.colourHex.hex }">
                    <pill-search
                    @pushUp="pushUp($event)"
                    :primColor="colour.primaryColour"
                    :secColor="colour.secondaryColour"
                    :slug="colour.slug"
                    :modelName="model.modelName"
                    ></pill-search>
                </span>

So I have this ” v-for=”model in sortIndex(colour.relatedModels)”

Where sortIndex() is a method that receive an object array and then I try to orderBy

    sortIndex(arrayModels){

   return _.orderBy(arrayModels, [arrayModels.index]);
    },

but actually don’t do anything

Important to say in that index, is nothing else more than a field inside relatedModels object, which is quite a fav range.

See an extract sample of my graph on here

[
    {
      "colorName": "yellow",
      "slug": "yellow",
      "colourDescription": "",
      "colourHex": {
        "hex": "#BF0000"
      },
      "colourSerie": "XX1",
      "id": "48361636",
      "secondaryColour": "hsla(0, 100.00%, 12.91%, 1.00)",
      "relatedModels": [
        {
          "id": "48355531",
          "index": "5",
          "modelName": "modelOne"
        },
        {
          "id": "48355536",
          "index": "4",
          "modelName": "modelTwo"
        }
      ]
    },
    {
      "colorName": "green",
      "slug": "green",
      "colourDescription": "",
      "colourHex": {
        "hex": "#C3E300"
      },
      "colourSerie": "XX2",
      "id": "58375424",
      "secondaryColour": "hsla(68.45814977973569, 100.00%, 14.24%, 1.00)",
      "relatedModels": [
        {
          "id": "48355512",
          "index": "6",
          "modelName": "modelFour"
        },
        {
          "id": "48354230",
          "index": "5",
          "modelName": "modelOne"
        },
        {
          "id": "48355529",
          "index": "7",
          "modelName": "modelThree"
        }
      ]
    },
    {
      "colorName": "yellow",
      "slug": "yellow",
      "colourDescription": "",
      "colourHex": {
        "hex": "#BF0000"
      },
      "colourSerie": "XX1",
      "id": "48361636",
      "secondaryColour": "hsla(0, 100.00%, 12.91%, 1.00)",
      "relatedModels": [
        {
          "id": "48355531",
          "index": "5",
          "modelName": "modelOne"
        },
        {
          "id": "48355536",
          "index": "4",
          "modelName": "modelTwo"
        }
      ]
    },
    ...
  ]

So any help or advice of a different approach of this will be very helpful