Data Option and Emits Option

The data option

In Vue 2, a data option, as a value, can have an object or a function that returns an object. Support for the former was dropped in Vue 3, so the data option must always be a function. Therefore, any time we create a component, we need to use a function.

The emits option

Vue 3 has introduced a new option called emits. It has two prominent use cases:

• First, it defines what kind of events a component emits to its parent.
• Second, because Vue 3 removed the .native modifier, all emitted events that aren’t defined in the emits property are treated as native events and added to the component’s $attr object. This change can occasionally result in two events being fired if a child component is re-emitting an event.