javascript - v-for ループ項目が Vue ですぐに更新されない

Question

静かなコンプレックスになりがちなので、ポイントごとに説明します。

• マウスまたはトラックパッドでテキストを強調表示し、マウスを離すと、強調表示されたテキストがオブジェクトの配列に保存されます。各オブジェクトには、選択したテキストが含まれています。

• その配列をループして、別のテキストを選択している限り、すべての選択を 1 つずつ表示できるようにしたいと考えています。

基本的に、選択した各テキストを selectionArray に格納しています。selectedText はそれぞれ、オブジェクト内の文字列です。したがって、SelectionArray は、最初の選択で次のようなオブジェクトの配列になります。

[
 {selectedText: '...string...'}
]

2 番目の選択で、配列が更​​新されます。

[
 {selectedText: '...string...'},
 {selectedText: '...another string...'}
]

など...最後に、selectionArrayと等しいitems配列でv-onを使用してループします。

this.items = selectionArray

現時点ではほとんどそこにいますが、ライブで変更が表示されないため、何かが欠けています。たとえば、結果を確認できるようにするには、HTML で役に立たない変更 (奇妙な) を行う必要があります。作成されたメソッドを疑っていますが、少なくとも論理的な調査方法をお願いします。どうも

コードは次のとおりです。

<template>
  <main class='wrapper'>
    <section class='wrapper-copy'>
      <div class='copy'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis sequi dolorum soluta pariatur asperiores. Recusandae atque nesciunt ipsa velit impedit fugit enim, quia explicabo adipisci sunt earum laudantium illo. Tenetur.
Animi magnam corrupti atque mollitia eaque enim, voluptatum magni laboriosam vel possimus reprehenderit aut doloribus inventore repellat aliquam voluptatem esse ut saepe at iusto qui quibusdam doloremque exercitationem ipsam. Dicta.
In animi nobis accusamus nemo repellat dicta a repellendus provident accusantium fugit voluptas minus laudantium reiciendis cumque, amet porro maiores quisquam? Ullam aut voluptatem delectus cum rerum perferendis vero laudantium!
      </div>

    </section>
    <article class="wrapper-select">
      <div class="select">
        <div id='input'
             class='selected-copy'
             v-for='(item, index) in items' 
             :key='item.index'>
          <div class='index'>{{ index }} </div>
          <p class='selection'> {{ item.selectedText }} </p>
        </div>
      </div>
    </article>
  </main>
</template>

<script>
  export default {
    name: 'app',
    data () {
      return {
        items: []
      }
    },
    created () {
      var selectionArray = []
      function storeSelection () {
        var selectedText = window.getSelection().toString()
        if (selectedText.length && selectionArray.indexOf(selectedText) === -1) {
          selectionArray[selectionArray.length] = {selectedText}
        }
        console.log(selectionArray)
      }
      document.addEventListener('mouseup', storeSelection)
      this.items = selectionArray
      console.log(this.items)
    }
  }
</script>