I seem to have run into an issue. my inner v-for is not being consistent with the ordering once it has changed. It shuffles every update.

I have a computed property called "List" This retrieves a state in my Pinia (vuex type) Store. The object is:

List: {
  CategoryOne: {
    item: false,
    item2: true,
    item3: false,
    item4: true
  },
  CategoryTwo: {
    item: false,
    item2: true,
    item3: false,
    item4: true
  }
}

In my first v-for, is as follows...

<div v-for="(value, index, key) in List" :key="key">
  <h1>{{ index }}</h1>
    <ul v-for="(value2, index2, key2) in value" :key="key2">
      <li>
        {{ index2 }} : {{ value2 }}
      </li>
    </ul>
</div>

The problem is, my inner v-for keeps getting shuffled everytime on refresh or update. Why is this???