Often, components need to manage data. In addition to props, which are passed-in immutable input, you can specify mutable component data similar to React's concept of state, as well as props.
Data can be specified as a plain object or a factory function that creates that object. Let's use the latter to rewrite the parent component to bind to mutable data, as shown in the following example:
<template>
<div>
<Child :greet="name" />
</div>
</template>
<script>
import Child from './Child.vue';
export default {
name: 'Parent',
components: {
Child,
},
data: () => ({
name: 'John Doe',
}),
}
</script>
Now the parent component binds the greet property to a data entry that can now be mutated as part of this component logic. Next, you will complete the pipeline and update the data as you learn about events and methods.