VueJS - DOM не обновляется при обновлении значения v-if

Question

У меня есть 2 просмотра одного и того же div (в v-for).

1. Список пользователей.
2. Когда вы нажимаете «добавить пользователя», вы можетесм. форму для ввода данных для нового пользователя.

В первом представлении я смогу изменить детали, отображаемые при нажатии кнопки.

Но как только я нажму накнопку, и я вижу 2-й набор деталей, и нажмите назад, чтобы просмотреть 1-й набор деталей, я не могу просмотреть форму «добавить пользователя».Если я начну с нажатия кнопки «Добавить пользователя» и вернусь к просмотру подробностей, я не смогу просмотреть 2-й набор деталей.

Довольно странно.

Шаблон:

<div v-for="container in containerList">
    <div v-if="container.viewUsers">
        <div v-for="user in container.users">
            <div>`{{ user.name }}`</div>
            <div v-if="container.viewPhone">`{{ user.phone }}`</div>
            <div v-else>`{{ user.gender }}`</div>
        </div>
    <div>
    <div v-else>
        <form>
            <input v-model="newUser.name">
            <input v-model="newUser.gender">
            <input v-model="newUser.phone">
        </form>
    </div>
    <button @click="triggerViewPhone(container)">View phone numbers</button>
    <button @click="triggerAddUser(container)">Add user</button>
</div>

Методы:

function triggerViewPhone(container) {
    var trigger = container.viewPhone == false || container.viewPhone == undefined ? true : false;
    this.$set(container, 'viewPhone', trigger);
}

function triggerAddUser(container) {
    var trigger = container.addUser == false || container.addUser == undefined ? true : false;
    this.$set(container, 'addUser', trigger);
}