Я немного устал сегодня, не могу сообразить, подскажите… Есть родительский компонент,

в нём я вызываю другой компонент, в который передаю переменную-массив contents. Есть ещё один компонент, который эмитит функцию родительского компонента для создания нового элемента. В рродительском компоненте есть переменная из data(), в которую добавляется новый элемент.

Но при добавлении элемента в contents, я не могу обновить эту переменную для дочернего компонента, так как она уже была передана в виде пропса в этот компонент. Как обновить данные дочернего компонента при изменениях в родительском?

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

<template>
<!-- Компонент, в который нужно передавать обновлённый массив contents из родителя —>
<scenario-menu-content-block-contents
:contents="contents"
/>

<!-- Компонент, который добавляет новый элемент в родительский contents —>
<scenario-menu-content-block-control-panel
@createNewElement='createNewElement'
/>

</template>

data() {
contents: Array,
}
}

methods: {
async createNewElement(element) {
try {
await axios.post(route('api/content/store'), this.contentForm)
.then(response => {
this.contents.push(response.data)
...

—————————————————————————————

Компонент scenario-menu-content-block-contents:

<template>
<div class="content-item"
v-for="content in contents"
>
…
</div>
</template>

props: {
contents: Array,
}

пропсы реактивные, вообще должно обновится. key в content-item указан?