Прохождение Реквизит Ребенок -> Родитель -> Ребенок

Я пытаюсь создать базовую форму, которая после отправки ввода отправляет данные родителю и затем отображается в списке в виде карты. Документация указывала мне на использование шины событий, но все это кажется немного слишком спроектированным для такой простой задачи. Не говоря уже о том, что он не работает xD. Я на правильном пути здесь? или не хватает всей идеи?

Данные, похоже, обновляются при отправке, но я не вижу рендеринга карты. Я также вижу следующую ошибку, Property or method "initiativeList" is not defined on the instance but referenced during render.

Однако я замечаю особенно странное изменение в рендере. Вместо того, чтобы ребенок был представлен в EncounterList.jsдочерние атрибуты сливаются с родительскими .

Любая помощь очень ценится.

Встреча с дэшбордом.JS

<template>
  <div>
    <NewCharacterForm @add-char="addChar" />
    <EncounterList v-bind="encounterList" @add-char="addChar" />
  </div>
</template>

<script>
import Character from "../classes/Encounter";
import NewCharacterForm from "./NewCharacterForm/NewCharacterForm.vue";
import EncounterList from "./EncounterList/EncounterList";
import EventBus from "./EventBus.js";

export default {
  name: "EncounterDashboard",
  components: { NewCharacterForm, EncounterList },
  data() {
    return {
      newChar: {},
      encounterList: []
    };
  },
  methods: {
    addChar(newChar) {
      this.newChar = newChar;
      this.encounterList.push(newChar);
      EventBus.$emit("add-to-list", this.encounterList);
    }
  }
};
</script>

Новая характеристика.JS

<template>
  <div class="new-char-wrapper">
    <form class="char-form" ref="form" v-on:submit.prevent="handleSubmit">
      <NewCharInput class="name-input" label="NAME" name="name" v-model="name" />
      <div class="stat-wrapper">
        <NewCharInput
          class="init-input"
          label="INITIATIVE"
          name="initiative"
          v-model="initiative"
          type="number"
        />
        <NewCharInput class="hp-input" label="HP" name="hp" v-model="hp" type="number" />
      </div>
      <div class="submit-row">
        <button class="submit">SUBMIT</button>
      </div>
    </form>
  </div>
</template>
<script>
import NewCharInput from "./NewCharInput";
import Character from "../../classes/Character";
import { uuid } from "vue-uuid";

export default {
  name: "NewCharacterForm",
  components: { NewCharInput },
  data() {
    return {
      name: "",
      initiative: "",
      hp: 0
    };
  },
  props: ["addChar"],
  methods: {
    handleSubmit() {
      const charName = this.$refs.form.name.value;
      const charInitiative = this.$refs.form.initiative.value;
      const charHp = this.$refs.form.hp.value;
      const charId = this.$uuid.v4();
      const newChar = new Character(charName, charInitiative, charId, charHp);
      this.$emit("add-char", newChar);
    }
  }
};
</script>

Встречаюсь с ним.JS

<template>
  <div class="encounter-list">
    <div class="header-row">
      <h2 class="header col-init">INIT</h2>
      <h2 class="header col-name">NAME</h2>
      <h2 class="header col-hp">HP</h2>
    </div>
    <EncounterCard
      v-for="character in initiativeList"
      v-bind:key="character.id"
      v-bind:hp="character.hp"
      v-bind:name="character.name"
      v-bind:initiative="character.initiative"
    />
  </div>
</template>
<script>
import EncounterCard from "../EncounterCard/EncounterCard";
import EventBus from "../EventBus";

export default {
  name: "EncounterList",
  components: { EncounterCard },
  data() {
    return {
      data: {
        initiativeList: []
      }
    };
  },
  methods: {
    populateList(charList) {
      this.initiativeList = charList;
    }
  },
  mounted() {
    EventBus.$on("add-to-list", charList => {
      this.populateList(charList);
    });
  }
};
</script>

Встречная карта.JS

<template>
  <div class="encounter-card-wrapper">
    <h1 class="char-init">{{character.initiative}}</h1>
    <h1 class="char-name">{{character.name}}</h1>
    <h1 class="char-hp">{{character.hp}}</h1>
  </div>
</template>
<script>
export default {
  name: "EncounterCard",
  props: ["character"]
};
</script>