Vì sao gán trực tiếp vào `props` bị cảnh báo? Con muốn sửa dữ liệu cha truyền xuống thì làm thế nào?

Vue áp dụng one-way data flow: props chỉ chảy từ cha xuống con. Gán props.title = ... sẽ bị Vue cảnh báo (và ở chế độ dev là lỗi) vì mỗi lần cha re-render, giá trị đó bị ghi đè lại — sửa ở con là thay đổi sẽ mất và luồng dữ liệu trở nên khó truy vết.

Ba cách xử lý tuỳ mục đích:

const props = defineProps({ title: String, items: Array })
const emit = defineEmits(['update:title'])

// 1. prop chỉ là giá trị khởi tạo → copy sang local state
const draft = ref(props.title)

// 2. cần biến đổi để hiển thị → computed
const upper = computed(() => props.title.toUpperCase())

// 3. cần cha đổi theo → emit ngược lên (v-model pattern)
function rename(next) { emit('update:title', next) }

Lưu ý: với prop là object/array, Vue chỉ chặn gán lại chính prop đó, không chặn sửa thuộc tính bên trong (props.items.push(x) vẫn chạy).

Nhưng đó là mutate state của cha từ xa — nên tránh, thay bằng emit để cha tự quyết định.