javascript - 如何在 vueJs 中重写文本打乱纯 js 代码？

Question

我需要将纯 JavaScript 代码重新改编为 vue.js 模板。
它的基础是这个文本加扰效果：https
://codepen.io/soulwire/pen/mErPAK 这是我的版本：
https ://codepen.io/iuliard/pen/ExyYyow

不幸的是，我必须在 vue.js/nuxt 中重做这个，因为我正在向我的网站添加后端。有没有办法达到相同的结果？或者有没有一种封装纯js的方法，并以某种方式使其在这样的模板中工作：

<template>
  <section>
    <div class="hfkfaq">
      <!-- TODO: HFK FAQ text scramble script -->
      <div class="text">
        <span class="dud">HFK</span>
      </div>
    </div>
  </section>
</template>

<script></script>

<style lang="postcss"></style>

任何帮助深表感谢！纯 CSS 动画技巧也可以提供帮助。