How to wrap a piece of dynamic content in a tag with SSR?

Question

Vue.js

Task: wrap time (format - 28.09.2020 12:18) in span

I try like this

<template>
...
  <p class="lf-news-item__date">{{ addTimeSpan(item.date) }}</p>
...
</template>
...
    methods: {
      addTimeSpan(date) {
        if (process.client) {
          let dateArr = date.split(' ');
          let span = document.createElement('span');
          span.innerHTML = dateArr[1];

          return `${ dateArr[0] } ${ span }`
        } else {
          return date;
        }
      }
    },
...

But instead of span outputs [object HTMLSpanElement]

v-html doesn't work with functions at all.

What is the best way to withdraw?

Answer 1

<template>
...
  <p class="lf-news-item__date">
    <span> {{ item.date.split(' ')[0] }} </span>
  </p>
...
</template>

What's the problem with doing this?