我正在尝试向 Vue.js 添加效果，但什么也没发生

Question

基本上，我正在尝试向 Vue JS 添加一些特殊效果，但什么也没发生，所以我知道我做错了什么，有人能指出我正确的方向吗？我已经包含了我试图在其中添加效果的组件。它是一个简单的闪烁光标，可以返回并擦除内容，然后重写它。我认为它很酷，但是当我插入代码时没有任何反应？？我把它放在组件内的脚本标签中，我相信这是正确的，我需要在单独的 js 文件中注册脚本吗？我正在阅读 Vue 文档，但要花很长时间才能找到任何信息。我希望有人能在这里给我介绍一下。

<template>
<div id='home'>      
  <section id="hero" class="d-flex align-items-center">
    <div id='bg'>
    <div class="bg">
        <img src="./img/bg1.png" class="bg1" alt="" />
        <img src="./img/girl1.png" class="girl" alt="" />
        <img src="./img/rock1.png" class="rock" alt="" />
    </div>
</div>
    <div class="container d-flex flex-column align-items-center" data-aos="zoom-in" data-aos-delay="100">
      <h1>
        <div id="container">
          <div id="text"></div><div id="cursor"></div>
        </div>
      </h1>
      <h2>
        <span class="blast" aria-hidden="true" style="opacity: 1;">I</span>
        <span class="blast" aria-hidden="true" style="opacity: 1;">'</span>
        <span class="blast" aria-hidden="true" style="opacity: 1; padding-right: 3px;">m</span>
        <span class="blast" aria-hidden="true" style="opacity: 1; padding-right: 3px;">a</span>
        <span class="blast" aria-hidden="true" style="opacity: 1;">p</span>
        <span class="blast" aria-hidden="true" style="opacity: 1;">r</span>
        <span class="blast" aria-hidden="true" style="opacity: 1;">o</span>
        <span class="blast" aria-hidden="true" style="opacity: 1;">f</span>
        <span class="blast" aria-hidden="true" style="opacity: 1;">e</span>
        <span class="blast" aria-hidden="true" style="opacity: 1;">s</span>
        <span class="blast" aria-hidden="true" style="opacity: 1;">s</span>
        <span class="blast" aria-hidden="true" style="opacity: 1;">i</span>
        <span class="blast" aria-hidden="true" style="opacity: 1;">o</span>
        <span class="blast" aria-hidden="true" style="opacity: 1;">n</span>
        <span class="blast" aria-hidden="true" style="opacity: 1;">a</span>
        </h2>
      <a href="#about" class="btn-about">About Me</a>
  </div>
  </section>
  

  <footer id="footer">

  </footer><!-- End  Footer -->

  <div id="preloader"></div>
        </div>

</template>

<script>
// List of sentences
var _CONTENT = [ 
    "Example 1", 
    "Example 2", 
    "Example 3", 
    "Example 4"
];

// Current sentence being processed
var _PART = 0;

// Character number of the current sentence being processed 
var _PART_INDEX = 0;

// Holds the handle returned from setInterval
var _INTERVAL_VAL;

// Element that holds the text
var _ELEMENT = document.querySelector("#text");

// Cursor element 
var _CURSOR = document.querySelector("#cursor");

// Implements typing effect
function Type() { 
    // Get substring with 1 characater added
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX + 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX++;

    // If full sentence has been displayed then start to delete the sentence after some time
    if(text === _CONTENT[_PART]) {
        // Hide the cursor
        _CURSOR.style.display = 'none';

        clearInterval(_INTERVAL_VAL);
        setTimeout(function() {
            _INTERVAL_VAL = setInterval(Delete, 50);
        }, 1000);
    }
}

// Implements deleting effect
function Delete() {
    // Get substring with 1 characater deleted
    var text =  _CONTENT[_PART].substring(0, _PART_INDEX - 1);
    _ELEMENT.innerHTML = text;
    _PART_INDEX--;

    // If sentence has been deleted then start to display the next sentence
    if(text === '') {
        clearInterval(_INTERVAL_VAL);

        // If current sentence was last then display the first one, else move to the next
        if(_PART == (_CONTENT.length - 1))
            _PART = 0;
        else
            _PART++;
        
        _PART_INDEX = 0;

        // Start to display the next sentence after some time
        setTimeout(function() {
            _CURSOR.style.display = 'inline-block';
            _INTERVAL_VAL = setInterval(Type, 100);
        }, 200);
    }
}

// Start the typing effect on load
_INTERVAL_VAL = setInterval(Type, 100);







export default {
 name: 'home'
}
</script>
   
<style>
.blast{
    opacity: 0;
    display: inline-block;
    -webkit-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
  .trail { /* className for the trail elements */
    position: absolute;
    height: 6px; width: 6px;
    border-radius: 3px;
    background: pink;
  }
  h1 span:hover {
    color: #224c3c;
    text-shadow: 2px 2px #18aa0b;
    font-size: 43;
}
  h2 span:hover {
    color: #224c3c;
    text-shadow: 2px 2px #01922d;
}
h3 span:hover{
  color: #e3c7a6;
  text-shadow: 2px 2px green;
}
  .bg {
    width: 100%;
    height: 100vh;
  }
  .bg img {
      position: absolute;
      object-fit: cover;
      width: 100%;
      height: 100%;
      z-index: 0;
  }
  .rock {
    height: 100%;
  }
#container {
    text-align: center;
}

#text {
    display: inline-block;
    vertical-align: middle;
    color: orange;
    letter-spacing: 2px;
}

#cursor {
    display: inline-block;
    vertical-align: middle;
    width: 3px;
    height: 50px;
    background-color: orange;
    animation: blink .75s step-end infinite;
}

@keyframes blink {
    from, to { 
        background-color: transparent 
    }
    50% { 
        background-color: orange; 
    }
}


</style>