2 components with v-if, one method is called, how to pass true/false from this method to v-if?

Question

Vue.js

There are 2 components. In one of them, a method is called from the outside that sets true/false for v-if component templates. How to do? Looking towards $emit and $on or buses? Or is there another solution?
Or is it somehow possible through props?

spoiler

<div id="app">
<h1>Component Test</h1>
<my-component ref="foo">my-component</my-component>
<first-comp>first-comp</first-comp>
</div>

<button id="ex">External Button</button>

Vue.component('first-comp', {
  template: '<ul><li v-for="thing in things">firstComp: {{ valfirst }}</li></ul>',
  // в этом шаблоне нужен v-if
  data: {

  },
})

var MyComponent = Vue.extend({
  template: '<div><p>MyComponent</p><ul><li v-for="thing in things">{{ thing }}</li></ul></div>',
  // в этом шаблоне нужен v-if
  data: function() {
    return {
      things: ['first thing'],
    };
  },
  methods: {
  	test: function(clid) {
    if (clid != 'none') {
     console.log('отображать элелменты с v-if ');
    } else {
     console.log('скрывть элелменты с v-if ');
    }
    	this.things.push('another thing ' + clid);
    }
  }
});

var vue = new Vue({
  el: '#app',
  data: {
  
  },
  components: {
  'my-component': MyComponent,
  }
});




document.getElementById("ex").onclick = function () {
  vue.$refs.foo.test('val');
};

https://jsfiddle.net/vitos8686/s8f3navb/43/

Answer 1

I didn’t really understand what exactly should happen, but here is the solution through props
https://jsfiddle.net/rbg7L9z3/