Javascript 如何在vueJs中重写文本加扰纯js代码？

我需要将纯JavaScript代码读入vue.js模板
它的基础是文本置乱效果：
这是我的版本：

不幸的是，我不得不在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>

HFK

---

非常感谢您的帮助！纯CSS动画提示也有帮助。

您好。欢迎来到SO。如果你能在密码笔中重现你所尝试过的东西，那就太完美了，我们会更容易帮助你。谢谢你的提醒。这是：