Vue.js: Есть ли способ заставить кнопки «v-if» реагировать через наблюдателя?

Question

По сути, у меня есть страница списка пользователей с кучей других профилей, включая ваш собственный профиль. Есть кнопка, которая появляется, только если вы находитесь в своем профиле.

Проблема в том, что, когда я переключаюсь с какого-либо другого профиля на свой собственный профиль (таким образом, изменяется параметр маршрутизатора), эта кнопка должна появиться. И наоборот, работает (мой профиль -> другой профиль, кнопка исчезает).

Теперь эта кнопка появляется, только если я переключаюсь с другого маршрутизатора (не с какого-либо другого профиля, а вместо этого, например, с домашней страницы на мой собственный профиль).

На моем Profile.vue

                        <v-btn
                            v-if= "isUserProfile()"
                            outline
                            large
                            fab
                            v-on="on"
                            color="indigo">
                        <v-icon>edit</v-icon>
                        </v-btn>

Используя watcher в Profile.vue, ищет каждый раз, когда изменяется параметр url / router

  watch: {
        '$route.params.username': {
            immediate: true,
            handler (value) {
                this.username = value
                this.getId()
                this.isUserProfile()
            }
        }
    },

с использованием метода,

isUserProfile () {
            return (this.$store.state.route.params.username === this.$store.state.user.username)
        },

Таким образом, кнопка ДОЛЖНА появляться каждый раз, когда я переключаюсь на свой собственный профиль из другого профиля, поскольку она работает, когда я переключаюсь из своего профиля в другой профиль. Для примера GIF, где мой профиль "123123":

https://gyazo.com/cf47036bfb60cc6490c538e50a32db81

Что я сделал здесь, так это переключил параметры в URL-адресе вручную, перейдя в мою учетную запись, в другую учетную запись обратно в мою учетную запись. (Кнопка есть; хорошая | нет; хорошая | кнопка еще не там, что должно быть; плохая.)

Answer 1

Хорошо, так что ответ простой , и модификации, делающие его вычисляемым значением , не были необходимы , как я только что проверил (я думаю, что лучше сделать это вычисленным значением)хотя).

Ответ : Вместо v-if: isUserProfile , сделайте его v-show: isUserProfile ;где теперь кнопка меняется на то, что должно быть достигнуто.

Теперь я буду читать https://vuejs.org/v2/guide/conditional.html для получения дополнительных знаний.