1文字ずつspanで囲むVue ComponentとPHP

アニメーションで使うと便利なものの一つに、文字を1文字ずつ分解してspanで囲むというものがよくあると思います。
コードはあとで調節しますが一旦おいておきます。(調節しないかもしれません)

Vueコンポーネント

<template>
  <span><span v-for="list in lists" :class="!list.flag?'u-clipText':''" :style="list.delay" :data-text="list.text"><span>{{list.text}}</span></span></span>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: ['text', 'delay', 'step'],
  data() {
    return {
      height:<number | null> null,
      list:<any> []
    }
  },
  methods: {

  },
  computed: {
    lists: function() {
      const arr:any = []
      const _texts = this.text.split('')
      let current = 0

      for (let i = 0; i < _texts.length; i++) {
        let flag = false
        const text = _texts[i]
        if (text !== ' ' && text !== ' ') {
          if(i !==0 ){
            current = current + 1
          }
        } else {
          flag = true
        }
        const obj = {
          text,
          flag,
          delay: `transition-delay: ${current * Number(this.step) + Number(this.delay)}s`,
        }
        arr.push(obj)
      }

      return arr
    },
  },
  mounted() {
    console.log('page-clip-text-mount')
  },
  beforeDestroy() {
    console.log('page-clip-text-destroy')
  }
})
</script>

PHP

function sepText($text, $count = 0)
{
  $matches = preg_split("//u", $text, -1, PREG_SPLIT_NO_EMPTY);
  $text = '';
  foreach ($matches as $val) {
    $count++;
//    $text .= '<span class="m-title__anim m-title__anim--'.$count.'">'.$val.'</span>';
    if ($val === ' ' || $val === ' ') {
      $text .= $val;
    } else {
      $text .= '<span>' . $val . '</span>';
    }
  }
  return $text;
}