CustomPage.vue:
<template>
<div>
<CustomChild :cat = "this.parentCat" />
<div v-on:click="this.changeName" id="change-button">
Change Parent Cat name
</div>
</div>
</template>
<script>
import CustomChild from "@/components/CustomChild";
export default {
components: {CustomChild },
methods: {
changeName() {
this.parentCat.name = "Changed First Name";
alert("Changed!");
}
},
data() {
return {
parentCat: {
name: "First Cat"
}
};
},
};
</script>
<style>
#change-button {
margin: 2em;
padding: 1em;
background-color: blue;
}
</style>
CustomChild.vue:
<template>
<div>{{this.superiorCat.name}}</div>
</template>
<script>
import {ref} from 'vue';
export default {
name: "CustomChild",
props: {
cat: Object
},
data() {
return {
superiorCat: Object
};
},
created() {
this.superiorCat = {};
this.superiorCat.name = ref(this.cat.name);
}
};
</script>
The display before the blue button is clicked:
The information for the CustomPage:
https://example.com/6baBx.png
The details for the CustomChild:
https://example.com/D7PHC.png
The names of parentCat in CustomPage and superiorCat in CustomChild are identical.
After clicking the blue button, the page output remains unchanged. The information updates as follows:
The details for the CustomPage:
https://example.com/3K5XF.png
The details for the CustomChild:
https://www.example.com/muWmg.png
Therefore, once the button is clicked, the cat property in the CustomChild component reflects the modification, while the superiorCat data does not, even when using ref.
How can I ensure that superiorCat.name also becomes reactive? Without resorting to applying watch on the cat property.