Отправка объекта из одного компонента в другой

Question

У меня есть компонент, который показывает вам все ваши задачи. Когда вы щелкаете одну задачу, я хочу, чтобы пользователь был отправлен на компонент с именем Task, который затем отображается с задачей, которую щелкнул пользователь.

Я уже пытался использовать $emit из компонента course в app, который затем отображает компонент задачи, но это приводит к тому, что компонент Task.vue всегда отображается в router-view.

Все данные взяты из базы данных Firebase. Хотя я не включил его, все компоненты также имеют переменные, объявленные в data()

Course component:

    <b-list-group class="listGroup" v-for="course in courses" v-bind:key="course.id">
      <b-button
        class="headline"
        disabled
        block
        variant="dark"
        style="opacity: 1"
        v-if="course.title"
      >{{course.title}}</b-button>
      <b-list-group-item variant="dark" class="clickableList" v-if="course.modul">{{course.modul}}</b-list-group-item>
      <b-list-group-item
        variant="dark"
        class="clickableList"
        @click="get(course.task6)"
        v-if="course.task6"
      >{{course.task6.name}}</b-list-group-item>
    </b-list-group>

  methods: {
    get(variable) {
      this.selectedTask = variable;
      this.$router.push('Task');
      this.$emit("task", this.selectedTask);

    }
  }

App.vue:

  <router-view @task="sendTask" />
      <div>
        <Task :parentData="childData" />
      </div>

  // Accepts data from course components
  methods: {
    sendTask(variable) {
      this.childData = variable;
    }

Task компонент:

<template>

      <b-button
        class="headline"
        disabled
        block
        variant="dark"
        style="opacity: 1"
        v-if="task.name"
        :item="task"
        :key="task.id"
      >{{task.name}}</b-button>


<script>
import firebase from "firebase";

export default {
  name: "Task",
  props: {
    parentData: {
      type: Object
    }
  },
  watch: {
    parentData: function() {
      if (this.$router.currentRoute.name == "Task") {
        this.task = this.parentData;
      }
    }
  }
};

Текущий код работает. Когда вы щелкаете по задаче, вы отправляетесь в компонент Task.vue, и код обрабатывается, но он не исчезает, когда вы покидаете представление.

Должен быть лучший способ сделать это.