We call these components declarative views because the same data inputs will always produce the same output in the visual UI.
When we declare data on this data object, it binds to the HTML on the template above when the value of the data changes, the component will automatically rerender; and the framework does a lot of work underneath the hood to make sure that this process delivers the desired performance across a huge component tree.
We can work with this data in the template thanks to views HTML based template syntax; we can interpolate a value for expression using double curly braces and we also have a variety of directives to control the behavior of the HTML based on the data.
We can use v-if directive to only render an element when the value on the right side is truthy and then we might have a fallback element after that that's only rendered when the value is falsey with V else, we can make the app interactive by listening to events using the V-on: click directive, we can listen to an event on an element then run some code to handle that event on the right side.
We can do that directly to the template or define a custom method and the components methods object.
The method has access to our reactive data and and that means that we all have to do is change the value of the data and the component will automatically will rerender.
I am planning to create a tutorial video on my YT channel on Vue and Django working hand-in-hand to create a full fledged web application.
You can check out my channel now and if you like what you see, I would love to have you as a subscriber