Loss of mutable responsiveness in Composition API

Question

I'm trying to get the ranks array of ranks_options from the useForm helper but it can't keep track of the current array

Please check below is my code

const form = useForm({
    name: null,
    ranks: [],
});

function addRanks() {
    form.ranks.push({ name: null, id:null});
}

ranks_options = form.ranks.map(function (value) {
    return value.name;
});

Answer 1

Convert it to a computed property :

const ranks_options = computed(() => form.ranks.map(value => value.name)

This will set form.rank as a dependency and recalculate its value when the dependency changes.