Data manipulation on child components

Now that all of our components are ready, we need to add them to our application. The base application will access the child component, and it will set the rating to 5 stars.

Now, follow these steps to understand and manipulate the data in the child components:

1. In the App.vue file, in the <template> part of the component, remove the main-text attribute of the MaterialCardBox component and place it as the default slot of the component.
2. Before the placed text, we will add the StarRating component. We will add a ref attribute to it. This attribute will indicate to Vue to link this component directly to a special property in the this object of the component. In the action buttons, we will add the listeners for the click event—one for resetVote and another for forceVote:

<template>
  <div id="app">
    <MaterialCardBox
      header="Material Card Header"
      sub-header="Card Sub Header"
  ...