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.