Vue.js: What is the difference between props and data in Vue?

Props — parent to child. Data — component internal.

Props:

• Passed from parent.
• Read-only in child.
• For component communication.
• Defined in props option.

1// Parent
2<Child :message="hello" />
3
4// Child
5export default {
6    props: ["message"]
7}

Data:

• Internal to component.
• Mutable.
• Component state.
• Must be function.

1export default {
2    data() {
3        return {
4            count: 0
5        }
6    }
7}

Key differences:

• Props — parent passes, read-only.
• Data — internal, mutable.
• Props — communication.
• Data — state.