Data properties
When we add a variable to our data object, we're essentially creating a reactive property that updates the view any time it changes. This means that, if we had a data object with a property named firstName, that property would be re-rendered on the screen each time the value changes:
<!DOCTYPE html>
<html>
<head>
<title>Vue Data</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<h1>Name: {{ firstName }}</h1>
<input type="text" v-model="firstName">
</div>
<script>
const app = new Vue({
el: '#app',
data: {
firstName: 'Paul'
}
});
</script>
</body>
</html>This reactivity does not extend to objects added to our Vue instance after the instance has been created outside of the data object. If we had another example of this, but this time including appending another property such as fullName to the instance itself:
<body...
