【Vue】datetime型で管理しているデータを日にち、時間別々に表示したい

Question

簡易的な飲食店予約システムを作成しております。
＊前提として
フロントエンド　→ Vue.cli
バックエンド　→ Laravel
データーベース　→ MySQL

＊実装したいこと
datetime型で管理しているデータをtemplate内で日にち、時間別々に表示させたい

＊現状
① axiosを使用してユーザーの予約情報(bookingsテーブル)を取得している
② ①で取得したデータをV-forにて表示している
③ bookingsテーブルは以下の通りです
bookingsテーブル
カラム名　　｜　　型
id unsigned bigint
user_id unsigned bigint
shop_id unsigned bigint
date_time datetime
user_number int
created_at timestamp
updated_at timestamp

＊ご教授いただきたいこと
scriptタグ内の実装したいことができる具体的な記述
可能であれば→ bookingDelete()もうまく動作しないのでそちらもご教授頂けますと幸いです。

以下、該当コードとなります。
お手数おかけいたしますが、よろしくお願い申し上げます。

<template>
<div class="mypage">
  <commonHeader />
  <div class="flex">
    <div class="left">
      <p class="booking-status">予約状況</p>
      <div v-for="bookingShop in bookingShops" :key="bookingShop.id">
        <div class="booking-info-container">
          <div class="flex booking-top">
            <p class="booking-number">予約{{bookingShop.id}}</p>
            <div class="css-cancel" @click="bookingDelete(bookingShop.id)"></div>
          </div>
          <div class="booking-info">
            <div class="flex">
              <p class="name-item">Shop</p>
              <p class="shop-name content">{{bookingShop.shop.shop_name}}</p>
            </div>
            <div class="flex">
              <p class="name-item">Date</p>
              <p class="booking-date content">{{}}</p>
            </div>
            <div class="flex">
              <p class="name-item">Time</p>
              <p class="booking-time content">{{}}</p>
            </div>
            <div class="flex">
              <p class="name-item">Number</p>
              <p class="number content">{{bookingShop.user_number}}人</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <p class="user-name">{{user_name}}さん</p>
      <p class="like-shop">お気に入り店舗</p>
      <div class="shops shop-flex">
        <div class="shop" v-for="likeShop in likeShops" :key="likeShop.id">
          <img :src="likeShop.shop.image_url">
          <div class="shop-info">
            <p class="shop-name">{{likeShop.shop.shop_name}}</p>
            <div class="area-genre">
              <span class="shop-area">#{{}}</span>
              <span class="shop-genre">#{{}}</span>
            </div>
            <div class="flex">
              <button @click="shopDetail(likeShop.shop_id)">詳しく見る</button>
              <div class="LikesIcon" @click="toggleHeart(shop.id)">
                <i class="fa-heart LikesIcon-fa-heart" :class="{ heart: isActive , fas: isActive ,far: !isActive }"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import commonHeader from '../components/commonHeader.vue';
import axios from 'axios';
export default {
  data() {
    return {
      bookingShops: [],
      likeShops: [],
      user_name: '',
      isActive: true,
    };
  },
  components: {
    commonHeader
  },
  methods: {
    shopDetail(shop_id) {
      this.$router.push({path: '/shopdetail/'+ shop_id, params:{shop_id:shop_id}});
    },
    bookingDelete(index) {
      axios.delete('http://localhost:8000/api/v1/shops/bookings/' + this.bookingShops[index].id)
      .then((res) => {
        console.log(res);
      });
    }
  },
  async created() {
    const userInfomation = await axios.get(
      'http://localhost:8000/api/v1/users/' + this.$store.state.id
    );
    // console.log(userInfomation);
    this.user_name = userInfomation.data.data.user_name;

    const userBookingShops = await axios.get(
      'http://localhost:8000/api/v1/users/' + this.$store.state.id + '/bookings'
    );
    // console.log(userBookingShops);
    this.bookingShops = userBookingShops.data.data;
    console.log(this.bookingShops);
    
    const userLikeShops = await axios.get(
      'http://localhost:8000/api/v1/users/' + this.$store.state.id + '/likes'
    );
    // console.log(userLikeShops);
    this.likeShops = userLikeShops.data.data;
    // console.log(this.likeShops);
  }
}
</script>

Answer 1

Date()を用いて自己解決