As you already know, the name "Vue" came from "views", that is, the view or interface of an application. Because the framework Vue has that as its main focus.

Vue, therefore, works behind the scenes to update/"re-render" the view (layer) whenever a data piece from an instance of it is updated or changed.

That said, when a Vue instance is declared like so:

    var vm = new Vue({
    	// Your codes here...
    )}

you benefit from the framework's so-called "reactivity system" if you call or include or declare or define all your data (properties) within the instance's data object.

What Vue does is it exposes your data to all the properties and methods found in this object. So, if the value of your data or property should change, 'the view would react and update to match the new values.' Make sense?

Now, and we get to the point of this post, this reactivity only applies to data that was available when the instance was created. Otherwise, or created later, and your stuff will be inert, if you'll excuse my chemistry.

But, what's that really mean?

Say you got

    // Your data object
    var data = {a: 1}

    // The object is added to a Vue instance
    var vm = new Vue({
      data: data
    })

    // Updating a property in your data object
    vm.a = 2;

    // The view will instantly react and update the value of a to 2

However, if you updated your data object by adding a new property to it, further updates wouldn't trigger a reaction, and may even throw you an exception/error.

Say you did

    // Adding new property to our data object
    vm.b = 'Hi,...'

    // Of course, your data object would become
    // {a: 1, b: "Hi,..."}

But, as it's already clear, b in your data would not benefit from Vue's reactivity.

To make sure every data you're to bring in continues reactive, always set some initial value to it in the object at the instance of creation. Examples,

    // All of these properties inside of data can be updated later and trigger reactivity
    data: {
      newTodoText: '',
      visitCount: 0,
      hideCompletedTodos: false,
      todos: [],
      error: null
    }