Реквизиты Vue cli 3 (родительский для дочернего) никогда не обновляются после изменения переменной в родительском элементе

Я попытался создать приложение для чата, используя Vue CLI 3, и закончил создание чат-комнаты в реальном времени. Затем я попытался дать ему функцию цитирования, чтобы пользователи могли цитировать сообщение раньше и отвечать на него. Итак, мне удается передать процитированное сообщение дочернему компоненту с помощью реквизита. По умолчанию процитированное сообщение было NULL. Я ожидал, что после того, как пользователь нажмет несколько кнопок, значение цитируемого сообщения изменится, и новое значение будет передано дочернему элементу через props (автоматически обновляется). Но на самом деле это не так.

Когда я просматривал Интернет, я нашел несколько вопросов об обновлении дочернего компонента при изменении значений свойств. Итак, я пробовал watch:, created(), update(), но ни один из них не работал. Однажды я попытался напрямую добавить элемент <p> в дочерний компонент и поместить в него {{cited_message}}, чтобы увидеть, что находится внутри переменной. Затем приложение Vue аварийно завершило работу, и осталась белая пустая страница (но консоль не показывала никаких ошибок).

Для удобства думаю проблема в следующем:

<CreateMessage:name="name":cited_message="this.cited_message"@interface="handleFcAfterDateBack"/>

OR

props: ["name","cited_message"], 
watch: { cited_message: function (newValue){ this.c_message = newValue; } },

Вы можете ctrl+F искать указанные выше коды, чтобы сэкономить время.

Родительский компонент:

<template>
  <div class="container chat">
    <h2 class="text-primary text-center">Real-time chat</h2>
    <h5 class="text-secondary text-center">{{ name }}</h5>
    <div class="card" style="min-height: 0.8vh">
      <div class="card-body">
        <p class="text-secondary nomessages" v-if="messages.length == 0">
          [no messages yet!]
        </p>
        <div class="messages" v-chat-scroll="{ always: false, smooth: false }">
          <div v-for="message in messages" :key="message.id">
            <div v-if="equal_name(message)">
              <div class="d-flex flex-row">
                <div class="text-info">
                  [ {{ message.name }} ] : {{ message.message }}
                </div>

                <div class="btn-group dropright">
                  <a
                    class="btn btn-secondary btn-sm dropdown-toggle"
                    href="#"
                    role="button"
                    id="dropdownMenuLink"
                    data-toggle="dropdown"
                    aria-haspopup="true"
                    aria-expanded="false"
                  >
                  </a>

                  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                    <button
                      @click="get_cited_message(message)"
                      :key="message.id"
                      class="dropdown-item"
                      href="#"
                    >
                      Cite
                    </button>
                  </div>
                </div>

                <div class="text-secondary time">
                  <sub>{{ message.timestamp }}</sub>
                </div>
              </div>
              <!--below is for cited message-->
              <div v-if="message.cited_message" class="d-flex flex-row">
                Cited  : {{ message.cited_message }}
              </div>
            </div>

            <div v-else>
              <div class="d-flex flex-row-reverse">
                <div class="text-info">
                  [ {{ message.name }} ] : {{ message.message }}
                </div>
                <div class="text-secondary time">
                  <sub>{{ message.timestamp }}</sub>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card-action">
        <CreateMessage
          :name="name"
          :cited_message="this.cited_message"
          @interface="handleFcAfterDateBack"
        />
      </div>
    </div>
  </div>
</template>

<script>
import CreateMessage from "@/components/CreateMessage";
import fb from "@/firebase/init.js";
import moment from "moment";

export default {
  name: "Chat",
  props: {
    name: String,
  },
  components: {
    CreateMessage,
  },
  methods: {
    equal_name(message) {
      if (message.name == this.name) {
        return true;
      } else {
        return false;
      }
    },
    get_cited_message(message) {
      this.cited_message = message.message;
      console.log(this.cited_message);
    },
    handleFcAfterDateBack(event) {
      console.log("data after child handle: ", event);
    },
  },
  data() {
    return {
      messages: [],
      cited_message: null,
    };
  },
  created() {
    let ref = fb.collection("messages").orderBy("timestamp");
    ref.onSnapshot((snapshot) => {
      snapshot.docChanges().forEach((change) => {
        change.type = "added";
        if (change.type == "added") {
          let doc = change.doc;
          this.messages.push({
            id: doc.id,
            name: doc.data().name,
            message: doc.data().message,
            timestamp: moment(doc.data().timestamp).format(
              "MMMM Do YYYY, h:mm:ss a"
            ),
            cited_message: doc.data().cited_message,
          });
        }
      });
    });
  },
};
</script>

<style>
.chat h2 {
  font-size: 2.6em;
  margin-bottom: 0px;
}
.chat h5 {
  margin-top: 0px;
  margin-bottom: 40px;
}
.chat span {
  font-size: 1.2em;
}
.chat .time {
  display: block;
  font-size: 0.7em;
}
.messages {
  max-height: 300px;
  overflow: auto;
  text-align: unset;
}
.d-flex div {
  margin-left: 10px;
}
</style>

Дочерний компонент:

<template>
  <div class="container" style="margin-bottom: 30px">
    <form @submit.prevent="createMessage()">
      <div class="form-group">
        <input
          type="text"
          name="message"
          class="form-control"
          placeholder="Enter your message"
          v-model="newMessage"
        />
        <p v-if="c_message" class="bg-secondary text-light">Cited:  {{c_message}}</p>
        <p class="text-danger" v-if="errorText">{{ errorText }}</p>
      </div>
      <button class="btn btn-primary" type="submit" name="action">
        Submit
      </button>
    </form>
  </div>
</template>

<script>
import fb from "@/firebase/init.js";
import moment from "moment";

export default {
  name: "CreateMessage",
  props: ["name","cited_message"],
  watch: {
    cited_message: function (newValue){
      this.c_message = newValue;
    }
  },
  data() {
    return {
      newMessage: "",
      errorText: null,
      c_message: null
    };
  },
  methods: {
    createMessage() {
      if (this.newMessage) {
        fb.collection("messages")
          .add({
            message: this.newMessage,
            name: this.name,
            timestamp: moment().format(),
            cited_message: this.c_message
          })
          .then(function(docRef) {
            console.log("Document written with ID: ", docRef.id);
          })
          .catch((err) => {
            console.log(err);
          });
        this.newMessage = null;
        this.errorText = null;
      } else {
        this.errorText = "Please enter a message!";
      }
    },
  },
  beforeMount(){
    this.c_message = this.cited_message;
  }
  
  
};
</script>

Примечание: в родительском компоненте я сделал раскрывающееся меню только для сообщений с левой стороны. Если бы эта нить решилась, я бы закончил правую часть.