Vue, аякс объект становится реактивным
 

Приветствую.
Получаю из json API обычный массив объектов

export default {
    props: [],
    data: function() {
        return {
            'cities' : null
        }
    },
    created: function() {
        axios.get('http://localhost:3000/cities', {
            
        })
        .then(response => {
            console.log(response.data); // (*)
            this.cities = response.data;
        });

,но прям сразу console.log(response.data); выдает результат как на приложенной картинке. Т.е. они уже изначально реактивные, прям сразу после аякса.
Не встречал описание такого в доках.
Что это за магия, где она происходит?

Vue при добавлении реактивности не заменяет объект, а изменяет переданный. Реактивность добавляется вот тут:

this.cities = response.data;

В консоли же вы видите объект на текущий момент, а не на момент вызова console.log.

Спасибо.
Забыл про эту особенность console.log.