Why doesn't the menu show up?

Question

Vue.js

I'm trying to make a slide out menu in vue, but it doesn't. Here is the code:
A component with a button that opens the menu when clicked (trimmed)

<p @click="openLeftMenu">Кнопка</p>

openLeftMenu: function() {
      this.$root.$emit("openLeftMenuBtnClicked");
}

the menu itself (adjacent component)

<transition name="slideLeftMenu">
   <div v-if="isLeftMenuShowed"> //menu </div>

   mounted: function () {
            this.$root.$on("openLeftMenuBtnClicked", function() {
                this.isLeftMenuShowed = true
            })
        }'

//стили
     .slideLeftMenu-enter-active, .slideLeftMenu-leave-active
        transition: .5s ease

    .slideLeftMenu-enter, .slideLeftMenu-leave-to
        transform: translateX(-500px)

    .slideLeftMenu-enter-to, .slideLeftMenu-leave
        transform: translateX(500px)
</transition>

A little unclear, v-if, transition does not react, styles are written incorrectly. If I did everything wrong, please write at least a rough plan of what needs to be done. In one component, the button that opens the menu, in the other - the menu itself.

Answer 1

Why doesn't it leave? Probably because the root component and the component in which the menu is located are different components, you do not set the value of the isLeftMenuShowed property there.
In general - wild game, $root.$on, why so, who advised you to do this? Say that the menu and the component with the button are neighbors - well, so carry out their interaction through the parent, for example .