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

В компоненте Vue данные приходят из трёх источников: props — снаружи от родителя, data — собственное состояние компонента, computed — значения, вычисленные из первых двух.

props

• Передаются родителем и описывают «вход» компонента.
• Только для чтения: изменять их в дочернем компоненте нельзя — нужно сообщить родителю событием.

data

• Внутреннее изменяемое состояние: открыт ли попап, текст в поле.
• Реактивно: изменение вызывает перерисовку.

computed

• Производные значения: отфильтрованный список, полное имя.
• Кешируются и пересчитываются только при изменении зависимостей.

export default {
  props: { items: Array },
  data: () => ({ query: '' }),
  computed: {
    visible() {
      return this.items.filter((item) => item.includes(this.query));
    },
  },
};

Коротко для собеседования

props — входные данные от родителя (только чтение), data — своё изменяемое состояние, computed — кешируемые производные значения.

Подробнее: Vue — Props