Vue компонент с динамическим числом подэлементов

Question

Я отображаю список строк, замененных массивом (динамическая длина). Я хочу, чтобы каждая строка заменялась разными цветами, используя span или другие элементы. Мой код показывает, что мне нужно, но я не люблю использовать v-html. Я хотел бы создать компонент для каждого "li". Есть ли лучший способ сделать это?

Код: https://jsfiddle.net/dowhiledo/jw98kfus/

var example1 = new Vue({
  el: '#example',
  data: {
    items: [{
        str: 'This is ### an he is ### years old',
        list: ['Frank', '14']
      },
      {
        str: '### and ### are ### ',
        list: ['George', 'John', "studying"]
      }
    ],

  },
  computed: {
    replaced() {
      this.items.forEach(item => {
        item.newStr = item.str;
        item.list.forEach(s => {
          item.newStr = item.newStr.replace("###", s)
        })
      })
      return this.items
    },
  },
  methods: {
    replaced2(item) {
      item.newStr2 = item.str;
      var count = 1;
      item.list.forEach(s => {
        var newElem = "<span class=span"+count+">" + s + "</span>";
        item.newStr2 = item.newStr2.replace("###", newElem)
        count++;
      })
      return item.newStr2
    }
  }
});

.span1 {  color: blueviolet;}
.span2 {  color: green;}
.span3 {  color: red;}
.span4 {  color: purple;}
.span5 {  color: yellow;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="example">
  <ul>
    <li v-for="(item,i) in replaced">
      {{ item.newStr }}
    </li>
  </ul>


  <hr> This is what I need:
  

  <ul>
    <li v-for="(item,i) in items" v-html="replaced2(item)">
    </li>
  </ul>

</div>