Changing parent properties via 2nd level child?

Question

Vue.js

Good afternoon. Faced the following problem:
There are three single-file vue components with such nesting: (4)daughter <= (1)parent => (2)daughter(parent of 3rd daughter) => (3)daughter
I.e. The 3rd daughter is drawn in the 2nd and after that they are drawn together in the 1st parent + the 4th daughter.
There is a need for the button located in the 3rd child to change the variable in the 1st parent... :)
i.e. you need to jump through the 2nd component
.
Then the variable that needs to be changed is already in the 2nd daughter and I can reach it through this.$emit('name')
but if you need to jump through one level of nesting, then such a scheme does not work
.
) - calendar.vue

<template>
  <div>
    	        <add-event-modal  v-if="show"></add-event-modal>
    <vue-event-calendar :show="show" v-on:testqw="tester" :events="currentEvents"></vue-event-calendar>
  </div>
</template>
<script>
import addEventModal from './addEventModal.vue';
import calEventItem from './vue-event-calendar/src/components/cal-event-item.vue'
  export default {
  		data () 
  		{
    		return {
    			show: false
                }

  		},
  		components:
  		{
  			addEventModal
  		},
  		methods:{
    		 tester: function (value) {
            this.show = value;
          }
    	}
  }
</script>

Daughter(2) -vue-event-calendar.vue

<template>
  <div class="__vev_calendar-wrapper">
      <cal-panel> </cal-panel>
      <cal-events></cal-events>
  </div>
</template>
<script>
import { isEqualDateStr} from './tools.js'
import addEventModal from './../../addEventModal.vue';
import calEvents from './components/cal-events.vue'
import calPanel from './components/cal-panel.vue'


export default {
  name: 'vue-event-calendar',
  components: {
    'cal-events': calEvents,
    'cal-panel': calPanel,
    'add-event-modal': addEventModal
  }
}
</script>

Daughter(3) - cal-panel.vue

<template>
  <div>
          <button v-on:click="addEvent"  v-if="date.status" class="dates-btn" type="submit"><i class="fa fa-plus" aria-hidden="true"></i></button>
         
  </div>
</template>
<script>
import i18n from '../i18n.js'
import { dateTimeFormatter, isEqualDateStr} from '../tools.js'

export default {
  name: 'cal-panel',
  data () {
    return {
      i18n,
      show: true
    }
  },
  methods: {
    addEvent: function () {
        this.$emit("testqw", this.show);
      }
}

Answer 1

Everything is standard, the options are:
1. We store the state in Vuex, when the button is pressed, we send a new state, through reactivity we change it in the parent
2. We catch the event in vue-event-calendar, forward it to the parent:

<cal-panel @testqw="$emit('testqw', $event)"> </cal-panel>

3. Use the global event bus