How to animate the appearance of an element with a BEM modifier using vue?

Question

Vue.js

vue docks:

<transition name="fade">
    <p v-if="show">привет</p>
  </transition>

My case:

<div class="menu-category"
        :class='[!this.$store.state.mobile ? "menu-category_desktop " : "menu-category_mobile"]'>

Hiding and showing only the element with the ..._mobile class. The desktop version does not need to be hidden and animated.
How to be?
Right now I see only two options: split the component into two different templates. Or write a regular js in the method

Answer 1

I don’t quite understand why this should be written in the class !this.$store.state.mobile, try writing it like this $store.state.mobileand why not put it in a computed property.