vuejs не обновляет HTML, когда я изменяю данные в созданном

Question

Вот ссылка

https://codepen.io/anon/pen/pqKrzY

HTML выглядит как

<span>items[selected].text: {{ items[selected].text }}</span>

и created:

created() {
  setTimeout(() => {
     this.items[0] = {
        text: "XX"
     };
     this.items[1] = {
        text: "YY"
     };
  }, 1000)
 }

это не обновляется автоматически, но если я нажму на кнопку выбора, оно изменится. И если я удалю setTimeout, он обновится автоматически.

Answer 1

Вы можете использовать

   this.items[0].text = 'XX';
   this.items[1].text = 'YY';

Answer 2

Вы не можете манипулировать массивом таким образом с помощью vue, пожалуйста, обратитесь к: Распространенные ошибки

Вот пример того, как это будет работать: https://codepen.io/anon/pen/NezvYV

this.items.$set(0, {
            text: "XX"
         })