The fact that Vue brings a reactive system provides you with another useful tool — computed properties.

There are cases in which components have some minor data projections, usually implemented as simple properties that depend on underlying data.

To demonstrate computed properties, let's change the Parent component to separate the data called name to both firstName and lastName. The template still binds to name, though. Given that it should be a simple concatenation, it is a good candidate for use with computed properties, as shown in the following example:

<template>
  <div>
    <Child @update="changeName" :greet="name" />
  </div>
</template>
 
<script>
import Child from './Child.vue';
 
export default {
  name: 'Parent',
  components: {
    Child,
  },
  computed: {
    name: function() {
      return this.firstName + ' ' + this.lastName;
    }
  },
  data: () => ({
    firstName: 'John',
    lastName: 'Doe',
  }),
  methods: {
    changeName: function(newName) {
      this.firstName = newName;
    }
  },
}
</script>

The preceding code showed us that the component now has firstName and lastName as the mutable data, and name is implemented as a computed property.

This allows the template to remain intact, meaning that it can still bind to name as it did before. Additionally, Vue is really smart about it. Along with its reactive system, Vue knows when relevant data is changed, and eventually renders the update to the DOM as expected.

Armed with all this information, you can proceed to implement the category menu using these exact features.