How to properly store and show checked entities in vueJS 2?

Question

Vue.js

There is a list of languages ​​(long).
[{id: 1,name:'English' }
...
]
It is necessary to mark what the person knows and save on the server. You can store directly in the array, but then each time you click, the entire array will be iterated. Smart people advised to make a separate set only with id and check by has(). But, as I understand it, VueJS does not track changes in sets and does not redraw.

Actually, what would be the optimal solution, taking into account the fact that it is necessary to draw the marked languages?

<div class="list-group-item p-0 pt-2"
                             v-for="(lang, index) in langsArr"
                             @click.prevent="clickLang(lang.id)"

                        >&nbsp;
                            <label>
                                <input type="checkbox">
                                <span class="list-group-item-text"><i class="fa fa-fw"></i>@{{lang.name}}</span>
                                <span
                                    v-if="isIssetLang(lang.id)"
                                > Отмечен  </span>
                            </label>
                        </div>

...

                isIssetLang(id) {
                    return this.chosenLangs.has(id);

                },

Answer 1

Just like you used to live without these newfangled Set\Map of yours:

chosenLangs: {},

clickLang(id) {
  return this.isIssetLang(id) 
    ? this.$delete(this.chosenLangs, id) 
    : this.$set(this.chosenLangs, id, true);
},

isIssetLang(id) {
  return id in this.chosenLangs;
},