В чем разница между props, data и computed

Props - это входные параметры, передаваемые от родительского компонента. Они реактивны, но изменять их напрямую нельзя (мутировать нужно через emit).

Data - это внутреннее состояние компонента, объявляется как функция, возвращающая объект. Данные реактивны, их можно изменять напрямую.

Computed - вычисляемые свойства, зависящие от других реактивных данных. Кэшируются и пересчитываются только при изменении зависимостей.

export default {
  props: ['initialCount'], // props
  data() {
    return {
      count: this.initialCount // data
    }
  },
  computed: {
    doubledCount() { // computed
      return this.count * 2
    }
  }
}

Главные отличия:

• Props - внешний интерфейс, data - внутреннее состояние
• Computed производны и кэшируются, методы вычисляются каждый раз
• Изменять можно только data (и computed через их зависимости)