Array of parse objects is not reactive in (Nativescript) Vue

Question

I seem to break the reactivity of my objects, and the v-if's don't work. My array is an array of Parse Objects, which require me to use .get() to get the values, which is working on initial load on title, description, etc. After I loaded the data, I check everything and update some values with the .set(), but they don't update the view until I hard refresh the whole Nativescript view, which is of course not a proper solution.

Nativescript

<ListView for="(item, index) in challenges" @itemTap="onItemTap(item)">
  <v-template>
   ....
    <GridLayout rows="auto" columns="*" >
     <Button v-if="item.get('joined')" text="0%" row="0" horizontalAlignment="right" class="challenge-button" @tap="onButtonTap()" />
     <Button v-else text="Meedoen" row="0" horizontalAlignment="right" class="challenge-button" @tap="joinChallengeButton(item, index)" />
    </GridLayout>
  ....
  </v-template>

Vue

@Component
export default class Challenges extends Vue {
  challenges: Parse.Object[] = []

  async joinChallengeButton(item, index) {
    item.set("joined", true)
  }
}

Parse Object

{
"title": "title x",
"description": "description x",
"createdAt": "2021-05-29T11:32:25.991Z",
"updatedAt": "2021-05-29T12:32:33.133Z",
"startDate": {
"__type": "Date",
"iso": "2021-05-19T11:32:00.000Z"
},
"endDate": {
"__type": "Date",
"iso": "2021-06-19T11:32:00.000Z"
},
"image": {
"__type": "File",
"name": "d8684be38017585079cfdb4380b4d9d4_sleep.jpeg",
"url": "xxxxx.com"
},
"joined": true,
"objectId": "AUJ4Y7XNcp"
}

Update 1: If I update the array the Vue way, it breaks the nativescript view and refreshed and only showing that item, instead of the full list.

    this.$set(this.challenges, index, item)

Answer 1

If found the answer. The object was updating with the vue method this.$set(this.challenges, index, item), but the listview was not showing the correct height after. So all the new objects were hidden rows.