Vuejs: Access a Parent Component Method from Child Component

Question

I can't access the parent method from a child component. I did what the official document stated.

Parent template:

<template>
  <v-app>
    <v-sheet height="100vh">
      <v-sheet height="100vh" class="overflow-y-auto">
        <div ref="ComponentDisplay" :is="currentComponent"></div>
      </v-sheet>
      <DrawerComponent></DrawerComponent>
    </v-sheet>
  </v-app>
</template>

<script>
export default {
  name: 'Dashboard',
  data: function () {
    return {
      currentComponent: null
    }
  },
  methods: {
    displayComponent (component) {
      this.currentComponent = component
    }
  }
}
</script>

DrawerComponent:

export default {
  name: 'DrawerComponent',
  methods: {
    exit: function () {
      logout()
    },
    swapComponent: function (component) {
      this.$parent.displayComponent(this.components[component])
    }
  },
  data: () => ({
    drawer: false,
    group: null,
    mini: true,
    components: {}
  }),
  watch: {
    group () {
      this.drawer = false
    }
  }
}
</script>

At the line:

this.$parent.displayComponent(this.components[component])

the below error raises:

TypeError: this.$parent.displayComponent is not a function