Why is ref not reactive in html tag?

Question

Vue.js

<div class="form-check" v-for="user in users" :key="user.id">
      <select class="form-select form-select-sm" :ref="user.username">
        <option selected>Выберите роль</option>
        <option v-for="role in roles" :key="role.id" :value="role.id">{{ role.title }}</option>
      </select>

      <input v-if="$refs[user.username]" class="form-check-input" type="checkbox"
             :value="[user.id, $refs[user.username][0].value]" v-model="users_id">
      <label class="form-check-label">{{ user.username }}</label>
    </div>

And in checkbox value 2, the array parameter should be the value of the select above. That is, if I change the value of the select, then I want the value 2 of the array element to change, but it always displays only the value selected option, even if I select a new element in the drop-down list.

And if I want to call the value of the select from this.$refsin the component method, then there is reactivity.

Answer 1

Why is ref not reactive in html tag?

By download))
https://ru.vuejs.org/v2/api/#ref

Also, the $refs object is not reactive, so don't try to use it in data binding templates.