Vue.js проблема с реактивностью ключей объекта добавленных $set

В объекте не обновляются свойства, добавленные с помощью this.$set. Нажимаем кнопку init, в объект obj добавляется свойство key2 и это отображается на экране, но при нажатии кнопки change поле name обновляется, а объект нет. Не могу понять почему. Он ведь зависит от поля name.

https://jsfiddle.net/g7tcpnqm/

<div class="sample">
  {{obj}}
  <hr>
  {{name}}
  <hr>
  <button class="btn btn-primary" @click="init">init</button>
  <button class="btn btn-primary" @click="change">change</button>
</div>
<script>
    new Vue({
        el: '.sample',
        data: {
            obj: {
                key: 'qwer'
            },
            name: 'asdf',
        },
        methods: {
            init(){
                this.$set(this.obj, 'key2', this.name);
            },
            change(){
                this.name = this.name + 1;
            },
        }
    });
</script>

Ответы (1 шт):

Автор решения: t0lik

Всё потому, что строки иммутабельны и выполняя this.$set(this.obj, 'key2', this.name) вы записываете копию строки в свойство объекта, а не просто ссылку на некий объект, поэтому изменение this.name уже не влияет на содержимое в this.obj. Почитайте внимательно про тип данных string в JS и как он себя ведет в таких случаях.

→ Ссылка