Challenge 2 / 2

Say I have this very simple counter component:

<template>
    <div v-text="count" />
</template>

<script>
export default {
    name: 'CounterComponent',
    data() {
        return {
            count: 0,
        };
    },
};
</script>

Why is it important that data is a function that returns an object? Why can't data be set directly to the { count: 0 } object?

Because the function needs to be called multiple times so that multiple instances of the component can have their own copy of the data.

Because it's the syntax defined by the Vue developers when designing the Options API.

It's not important but it gives us more versatility with regards to what can be computed in that initial data object.

Because this way, Vue can get every property of such returned object and add them as reactive properties to the instance's this keyword.

Rewatch the video