Как разделить строку на две части?

Как разделить строку? И каждую часть хранить в отдельном элементе?

<template>
  <div class="chat_module">
    <div>
      <ul>
        <li v-for="(message, index) in messages" v-bind:class="[{userright: message.my}, 'userleft']" :key="index">
          <div>
            {{ message.text }}
          </div>
          <div class="messagetimeauthor">{{ message.author }} - {{ message.created }}
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>

export default {
  props: {
    row: {type: Object, required: true}
  }

  data: () ->
    return {
      chat_title: ""
      messages: [
        {
          my: false
          author: "voronov-ii"
          text: "Привет. Необходимо согласовать ТТ."
          created: "2022-03-14 09:01:35"
          viewed: true
        }
        {
          my: true
          author: "grigoriev-as"
          text: "Привет. Хорошо."
          created: "2022-03-14 09:02:11"
          viewed: false
        }
        {
          my: false
          author: "voronov-ii"
          text: "В переговорке"
          created: "2022-03-14 09:03:15"
          viewed: false
        }
      ]
    }

  mounted: () ->
    @chat_title = @row.instance.get_not_adapted("name")

  computed: {
  }

  methods: {
  }
}
</script>

В message.created хранится дата и время, я хочу разделить их на два значения, чтобы под сообщениями выводилось только время, а в начале нового дня только дата.