Learn TypeScript 3 by Building Web Applications

The internal state of a component

Components can also have their own internal state/data:

props: ['someInput'], 
data: function() {    return {
        foo: this.someInput,    };
} 

In the preceding example, someInput is passed in and used for the internal state of the component in a foo property. The function needs to be defined so that the state remains internal (remember our previous discussions about encapsulation!).

Components shouldn't try to mutate their properties. Such mutations will be lost whenever Vue refreshes the bindings (for example, when the parent component is updated). If you need to mutate a property, then add it to the data of the component, like we did previously, or to the computed object, which is there to hold derived properties ...