title: Toggle model for a specific Vue child component
body: <p>I have 1 parent and 2 types of child components for a navbar of my application.</p>
  
  <p>Parent Vue component has the following code:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="be-submenu__inner"&gt;
          &lt;ul class="be-submenu__categories"&gt;
              &lt;category-tab name="Events" @setActive="toggleActive"&gt;&lt;/category-tab&gt;
              &lt;category-tab name="Articles" @setActive="toggleActive"&gt;&lt;/category-tab&gt;
          &lt;/ul&gt;
          &lt;news-cards&gt;&lt;/news-cards&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import NewsCards from './NewsCards.vue'
  import CategoryTab from './CategoryTab.vue'
  
  export default {
      name: 'be-nav-submenu-news',
      data() {
          return{
              queryCategory: null,
              posts: ''
          }
      },
      methods: 
          toggleActive: function (selectedTab) {
              console.log(selectedTab)
          }
      },
      components: {
          CategoryTab,
          NewsCards
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><code>category-tab</code> components:</p>
  
  <pre><code>&lt;template&gt;
      &lt;li class="be-submenu__category"&gt;
          &lt;a :class="[titleStyle, { 'is-active': isActive }]" @mouseover="setActive"&gt;
              {{ this.name }}
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      export default {
          name: 'be-category-tab',
          data() {
              return {
                  titleStyle: 'be-submenu__category-link'
              }
          },
          props: {
              name: {
                  required: true
              },
              isActive: {
                  required: false,
                  default: false
              }
          },
          methods: {
              setActive: function () {
                  this.$emit('setActive', this.name) 
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>What I want to do is to update tabs state once I put my cursor over one of them. Let's say I hover the second tab and its property <code>isActive</code> gets set to <code>true</code>. Other components becomes inactive and <code>&lt;news-cards&gt;</code> component's content also get updated according to a tab I select.</p>
  
  <p>I assume that I have to track all the child elements with <code>'be-category-tab'</code> name somehow and update their state once the custom event is triggered. Vue documentation got me confused about custom events, so now I am not even sure if I use it right at all.</p>
  
  <p>Could you give me a clue what could be my next step here? Or maybe I should use something else, but custom events.  Thanks in advance.</p>