Learning Vue.js reactive data with Refs and Reactive

In the previous section, we started to make our component dynamic, but that was just the first of two steps required for our component to be fully reusable. It is time to learn about component state, also known as Data (term used in the Option API) or Refs and Reactive (terms used in the composition API). Being able to set private component information, together with the ability to define component properties, will be our toolset for dynamic and flexible components.

Before we jump into data, we need to go back to the previous section and take a look at the component we just created. If you look carefully, the versions of SocialPost.vue look similar, and there seems to be no actual difference between the hardcoded version and the dynamic version.

So, why have we gone through the trouble of making all those changes if nothing changed? Well, the change is there, we have just not used it yet.

Let’s think for a minute...