Child component
<template>
<div>
<h3>Child Component</h3>
<div>
<button @click="changeValue()">Update Parent Value</button>
</div>
</div>
</template>
<script>
export default {
data() {
return{}
},
methods: {
changeValue() {
this.$parent.model[somekey] = somevalue
}
}
</script>
<style>
</style>
Parent component
<template>
<div>
<h3>Parent Component</h3>
<div>
{{model}} **<!--value is not refleted here -->**
</div>
</div>
</template>
<script>
export default {
data() {
return{
model: {}
}
}
}
</script>
<style>
</style>
Changing the value of the parent variable using the changeValue method of the child component does not reflect in the parent interpolation syntax ({{model}}). However, when accessed in a parent method, the updated value is obtained.