Vue.js+BoostrapでAPIを実行して結果をv-forとcardを用いて表示するのがうまくいかない

前提・実現したいこと

ボタンを押した時にフォームの内容を引数としてAPIをたたき、その結果をv-forを用いてcardの形で表示したい。

発生している問題・エラーメッセージ

ボタンを押しても画面が変わらずCardが表示されない。

該当のソースコード

Vue.js
1<template>
2  <div>
3  <div class="jumbotron-fluid">
4    <div class="container">
5      <h1 class="display-3">楽曲の検索</h1>
6      <p class="lead">Search for song</p>
7    </div>
8  </div>
9    <br>
10    <br>
11  <div>
12    <div class="container">
13      <form class="form-inline mx-auto" style="width: 500px;">
14        <div class="form-group">
15        <select class="form-control" v-model="type">
16          <option>曲名から</option>
17          <option>アーティスト名から</option>
18        </select>
19        <input class="form-control" type="search" placeholder="Search" aria-label="Search" v-model="keyword">
20        <button class="btn btn-outline-success" type="submit" v-on:click="Search()">Search</button>
21        </div>
22      </form>
23    </div>
24  </div>
25    <div><hr></div>
26    <div>
27      <section>
28        <div class="container col-sm-3">
29          <div class="card border-info" v-for="item in itmes" :key="item">
30            <div class="card-body">
31              <h2 class="card-title">{{ item.Title }}</h2>
32              <ul class="list-group list-group-flush">
33                <li class="list-group-item">アーティスト名：{{ item.Artist }}</li>
34                <li class="list-group-item">作詞：{{ item.Word }}</li>
35                <li class="list-group-item">作曲：{{ item.Composer }}</li>
36                <li class="list-group-item">編曲：{{ item.Arranger }}</li>
37              </ul>
38            </div>
39          </div>
40        </div>
41      </section>
42    </div>
43  </div>
44</template>
45
46<script>
47import axios from "axios";
48
49export default {
50  name: "song",
51  date: function () {
52    return{
53      type: "",
54      keyword: "",
55      items: [],
56      list: []
57    }
58  },
59  methods: {
60    Search: function (){
61      search2.get(this.type, this.keyword)
62    }
63  }
64}
65
66let search2 = {
67  get: async function (type, keyword){
68    const res = await axios.get('URL?title='+keyword)
69    this.items = res.data.Items
70    console.log(this.items)
71  }
72}
73</script>

試したこと

console.logを使って調べたところ、APIからは目当てのデータが返ってきている。
再描写のタイミングの問題かと考えて試しに事前にデータをいれてみたがそれでも表示されなかった。

補足情報（FW/ツールのバージョンなど）

axios: 0.21.0
bootstrap: 4.5.3
bootstrap-vue: 2.19.0
core-js: 3.6.5
vue: 2.6.12
vue-router: 3.4.9

以下はAPIから返ってくるJSONの一例です。

[
        {
            "Title": "シルエット",
            "Composer": [
                "谷口鮪"
            ],
            "Artist": "KANA-BOON",
            "Word": [
                "谷口鮪"
            ],
            "Arranger": [
                "KANA-BOON"
            ],
            "Genre": [
                "J-POP",
                "Anime"
            ]
        }
]