Difference in Vue between data() and adding data in created()

Question

Is there a difference between the following? I've seen examples doing both and am unsure why you would choose one over the other.

Vue.component('test', {

        data() {
           return { myDataA: 10 };
        }

        //vs

        created() {
           this.myDataB = 10;
        }
    }

Answer 1

Variables set in created() on this will not be reactive. In order for them to be reactive, you must define them in the object returned by data().

Example (note how the text does not change in the output): https://jsfiddle.net/oyf4quyL/