Vue array of objects is not reactive?

Question

typescript

export default class Menu extends Vue {
    @namespace(APP).Getter
    isServiceAnime!: boolean;

    menuItems: { title: string, icon: string, urlName?: string }[] = [
        {
            title:   this.isServiceAnime ? 'Gallery' : 'Anime',
            icon:    this.isServiceAnime ? 'fa far fa-image' : 'fa far fa-play',
            urlName: this.isServiceAnime ? GALLERY_NAME : ANIME_LIST_NAME,
        },

There is no reactivity, the vuex data is updated like the result of the getter, but data and html are old, not updated.
If I understand correctly, then this.isServiceAnime is always undefined here, so it issues and renders the second option, but even so, there is an update in mounted

@namespace(APP).Action
    useAnimeService!: () => void;

    mounted() {
        this.useAnimeService(); // gallery

I have keys for template and elements

<template :key="this.$route.path">
    <div    :key="item.title"
                 v-for="item in this.menuItems"
            >

module

@Module({namespaced: true})
export default class App extends VuexModule {
    service: ServiceType = ServiceType.Anime;

    public get isServiceAnime(): boolean {
        return ServiceType.Anime === this.service;
    }


    @MutationAction
    public async useAnimeService(): Promise<object> {
        return {
            service: ServiceType.Anime
        };
    }

    @MutationAction
    public async useGalleryService(): Promise<object> {
        return {
            service: ServiceType.Gallery
        };
    }

}

parameter is pre-declared, so it should be reactive in theory.

In addition, watch works on changes, well, yes, as well as changes in state and getter values

@Watch('isServiceAnime', {immediate: true, deep: true})
    private onValueChange(value: string, oldValue: string) {
        console.log(value);
        console.log(oldValue);
    }

Yes, I checked the dock here.

The only option, as I understand it, is to delete and overwrite the N element in watch, but is this correct?

Answer 1

public get isServiceAnime(): boolean {

@Watch('isServiceAnime', {immediate: true, deep: true})

For boolean values, do you include deep? Cool.

yes, I checked the doc here

And here ? Obviously, if one property should depend on another, it should be made computable.