Как предотвратить повторный рендеринг старых элементов в списке при добавлении новых элементов

Question

В настоящее время я использую v-for для отображения списка на экране и кнопку для добавления некоторых новых элементов в список

<div v-for="(item, index) in contentList" :key="'content' + index" >
    {{ $textFormat.formatText(item) }}
</div>
<div class="btn" @click="pushitem">CLICK</div>

pushitem () {
  const self = this
  self.contentList.push(...self.newItems)
},

mounted () {
    const self = this
    self.contentList = []
    self.newItems = ['a', 'b', 'c', 'd']
}

Я также написал плагин для форматирования текста на экране

const TextFormat = {


install (Vue) {
    Vue.prototype.$textFormat = {
      formatText (value) {
        setTimeout(function () {
          console.log(value)
          return value
        })
      }
    }
  }
}
export default TextFormat

Моя проблема заключается в том, что всякий раз, когда я щелкаю, чтобы добавить новые элементы, Vue, кажется, перерисовывает все элементы внутри v-for, поэтому мой плагин formatText снова вызывается для каждого элемента, для большего числапункт в списке, производительность хуже.Так есть ли решение, что мой плагин запускается только для новых элементов каждый раз, когда я нажимаю на кнопку pushItem, но не на старый?Или это так, как я создал формат текста плагин?