Vuex commit does not trigger v-show

Question

I'm trying vuex for the first time, I found that a v-show directive is not been triggered after mutation commit on the store

// store.js
import Vue from "vue"
import Vuex from "vuex"

const states = {
    app: {
        init: "APP_INIT"
    }
}

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        appState: ""
    },
    mutations: {
        changeAppState (state, appState) {
            state.appState = appState
        }
    },
    getters: {
        isVisible: state => state.appState === states.app.init
    }
})
export { store }

ComponentA.vue

<template v-show="isVisible">
    <div id="componentA"></div>
</template>

<script>
    export default {
        name: "ComponentA",
        computed: {
            isVisible () {
                return this.$store.getters.isVisible
            },
            appState () {
                return this.$store.state.appState
            }
        },
        watch: {
            appState (newVal, oldVal) {
                console.log(`Changed state: ${oldVal} => ${newVal}`)
            }
        },
        mounted () {
            setTimeout(() => {
                this.$store.commit("changeAppState", "APP_INIT")
            }, 1000)
        }
    }
</script>

<style scoped lang="scss">
    #componentA {
        width: 400px;
        height: 400px;
        background: red;
    }
</style>

I've defined a getter isVisible which should evaluate to true if the state.appState property is equal to the string APP_INIT. I thought that the commit on the mutation will trigger the reactive system and force a re-render of the view, but this is not happening. Why?

Answer 1

Directives cannot be applied to the root <template> like that. You'd have to use an inner element:

<template>
  <div v-show="isVisible">
    ...
  </div>
</template>

demo

Also note the Vue docs state:

Note that v-show doesn’t support the <template> element, nor does it work with v-else.