Вопрос проверяет понимание синтаксиса шаблонов Vue и того, как фреймворк различает строковые литералы и JavaScript-выражения.
Во Vue атрибут без : всегда считается строкой. Атрибут с : интерпретируется как JavaScript-выражение. Это правило действует для всех атрибутов, включая class, style, key и пользовательские пропсы. Непонимание этого часто приводит к логическим ошибкам. Для передачи значений из данных нужно использовать динамический биндинг.
Vue использует единое правило для интерпретации всех атрибутов в шаблоне.
Строковый атрибут — это значение, переданное как текстовый литерал.
Динамический атрибут — это значение, вычисляемое как JavaScript-выражение.
Если атрибут указан без ::
<MyComponent title="hello" />
Vue передаст строку "hello", даже если в данных есть переменная с таким именем.
Если используется ::
<MyComponent :title="message" />
Vue возьмёт значение переменной message из контекста компонента.
Из-за этого различия:
key="id" передаёт строку "id"
:key="id" передаёт значение переменной
:disabled="false" реально отключает атрибут
disabled="false" всё равно включает disabled
Во Vue все атрибуты без : — строки, а с : — выражения, и это правило нужно учитывать всегда.