Насколько правильно этот ротатор слов, который я создал с помощью Vue, копирует логику из версии, реализованной в JQuery?

Question

Привет, я пытаюсь создать эффект ротатора слов или пишущей машинки с помощью vuejs.

Я нашел библиотеки здесь реализуется JQuery. Сейчас я пытаюсь сделать такой ротатор слов. Я использую ту же таблицу стилей и логику. Просто переход с jquery на vue. вот мой код.

 <script>
export default {
  name: "WordRotator",
  props: {
    effect: {
      type: String,
      default: "type"
    },
    words: {
      type: Array,
      default: []
    }
  },
  data: function() {
    return {
      wordIndex: Number,
      letterIndex: Number,
      parentClass: String
    };
  },
  computed: {
    state: vm =>
      vm.parentClass == ""
        ? "typing"
        : vm.parentClass == "waiting"
        ? "waiting"
        : vm.parentClass == "selected"
        ? "selected"
        : "unknown"
  },
  created: function() {
    this.wordIndex = 0;
    this.letterIndex = 0;
    this.parentClass = "waiting";
  },
  mounted: function() {
    var vm = this;
    setTimeout(vm.hideWord, 2500);
    console.log("mounted " + vm.parentClass);
  },
  updated: function() {
    var vm = this;
    console.log("updated " + vm.parentClass);

    if (vm.state == "typing") {
      setTimeout(vm.showWords, 150);
    } else if (vm.state == "selected") {
      setTimeout(function() {
        vm.letterIndex = 0;
        vm.wordIndex = vm.wordIndex == vm.words.length - 1 ? 0 : vm.wordIndex + 1;
        vm.parentClass = "";
      }, 500);
    } else if (vm.state == "waiting") {
      setTimeout(vm.hideWord, 2500);
    }
  },
  methods: {
    hideWord: function() {
      var vm = this;
      vm.parentClass = "selected";
    },
    showWords: function() {
      var vm = this;
      console.log(`Typing ${vm.letterIndex} letter of ${vm.wordIndex} word.`);
      vm.letterIndex = vm.letterIndex + 1;

      // end of word -> switch word
      if (vm.words[vm.wordIndex].split("").length == vm.letterIndex - 1) {
        vm.parentClass = "waiting";
      }
    },
    hideLetter: function() {},
    showLetter: function(letter, word, bool, duration) {}
  },
  render: function(createElement) {
    var vm = this;

    return createElement(
      "div",
      {
        class: `word-rotator letters ${vm.effect}`
      },
      [
        createElement(
          "span",
          {
            class: `word-rotator-words ${vm.parentClass}`
          },
          [
            ...vm.words.map((word, idx) => {
              var letters = word.split(""),
                selected = idx == vm.wordIndex;
              return createElement(
                "b",
                {
                  class: selected ? "is-visible" : "is-hidden",
                  style: "opacity: 1"
                },
                letters.map((letter, index) => {
                  return createElement(
                    "i",
                    {
                      class: selected && index <= vm.letterIndex ? "in" : "out"
                    },
                    [letter]
                  );
                })
              );
            })
          ]
        )
      ]
    );
  }
};
</script>

<style>
</style>

Это вроде как работает, но не кажется текучим, как оригинал. Я новичок в vue и реактивности. Итак, согласно моей логике, я пытаюсь изменить состояние в определенные моменты времени и итераций. Но не уверен, насколько это интенсивный процесс по сравнению с эквивалентом jquery. Не уверен, насколько возможно реагировать на каждой итерации, чтобы обработать компонент vue для отражения изменений.

Я также думаю, что если я могу использовать версию jquery напрямую, поскольку компонент является статическим, он не будет реагировать на ввод данных пользователем.

Верно ли мне подходить к такому итеративному и последовательному изменению поведения в vue.