Vueでデータをaタグに出力したい

前提・実現したいこと

大学の授業データをスクレイピングしてまとめて、取得したURLをaタグに出力しようとしていますがうまくいきません。

結果をLaravelとVueで検索機能を使って各データを出力しています。
1つ目のv-for="data in filterData"のブロックのaタグで絶対パスでURLを出力しようとしたところ

vue.js:634 [Vue warn]: Error compiling template:

href="{{data.url}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.

11 |                  <input v-model="keyword" placeholder="search..." type="text">
12 |                  <div v-for="data in filterData">
13 |                      <a href="{{data.url}}">
   |                         ^^^^^^^^^^^^^^^^^^^
14 |                          <p>{{data.url}}</p>
15 |                          <p>{{data.time}}</p>

(found in <Root>)

というエラーが発生したのでhrefの箇所を:hrefに変更しました☟
そして、この時点でのaタグの変遷先はhttp://127.0.0.1:8000/%7B%7Bdata.url%7D%7Dのようになっています。

[Vue warn]: Error compiling template:

invalid expression: Unexpected token '{' in

    {{data.url}}

  Raw expression: :href="{{data.url}}"


11 |                  <input v-model="keyword" placeholder="search..." type="text">
12 |                  <div v-for="data in filterData">
13 |                      <a :href="{{data.url}}">
   |                         ^^^^^^^^^^^^^^^^^^^^
14 |                          <p>{{data.url}}</p>
15 |                          <p>{{data.time}}</p>

(found in <Root>)

で構文エラーが発生してしまいうまくいきません。

該当のソースコード

PHP
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>授業検索</title>
7    <style>
8        スタイル省略
9    </style>
10</head>
11
12<body>
13    <div class="tabs" id="app">
14        <input id="class" type="radio" name="tab_item" checked>
15        <label class="tab_item" for="class">時間と授業で探す</label>
16        <input id="teacher" type="radio" name="tab_item">
17        <label class="tab_item" for="teacher">授業と先生で探す</label>
18        <input id="design" type="radio" name="tab_item">
19        <label class="tab_item" for="design">？？？</label>
20
21        <div class="tab_content" id="class_content">
22            <div class="tab_content_description">
23                <input v-model="keyword" placeholder="search..." type="text">
24                <div v-for="data in filterData">
25                    <a href="@{{data.url}}">
26                        <p>@{{data.url}}</p>
27                        <p>@{{data.time}}</p>
28                        <p>@{{data.subject}}</p>
29                    </a>
30                </div>
31            </div>
32        </div>
33        <div class="tab_content" id="teacher_content">
34            <div class="tab_content_description">
35                <input v-model="keyword" placeholder="search..." type="text">
36                <p v-for="data in filterData">
37                    @{{data.subject}}
38                    @{{data.teacher}}
39                </p>
40            </div>
41        </div>
42        <div class="tab_content" id="design_content">
43            <div class="tab_content_description">
44                <input v-model="keyword" placeholder="search..." type="text">
45                <p v-for="data in filterData">
46                    @{{data.time}}
47                    @{{data.subject}}
48                    @{{data.teacher}}
49                    @{{data.class}}
50                    @{{data.url}}
51                    @{{data.semester}}
52                    @{{data.credit}}
53                </p>
54            </div>
55        </div>
56    </div>
57
58    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
59    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
60    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
61    <script>
62        var app = new Vue({
63            el: '#app',
64            data: {
65                datalist: [],
66                keyword: '',
67            },
68            mounted: function() {
69                axios.get('/api/time').then(response => this.datalist = response.data)
70            },
71            computed: {
72                filterData: function() {
73                    let datas = [];
74                    for (let i in this.datalist) {
75                        let data = this.datalist[i];
76                        if (data.time.indexOf(this.keyword) !== -1 ||
77                            data.subject.indexOf(this.keyword) !== -1 ||
78                            data.teacher.indexOf(this.keyword) !== -1 ||
79                            data.semester.indexOf(this.keyword) !== -1 ||
80                            data.credit.indexOf(this.keyword) !== -1 ||
81                            data.class.indexOf(this.keyword) !== -1) {
82                            datas.push(data);
83                        }
84                    }
85                    return datas;
86                }
87            },
88        })
89    </script>
90</body>
91
92</html>

試したこと

エラー文の通りv-bindの省略系をつかったがうまくいかない

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

laravel 8.20.1

package.json


 "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "vue-router": "^3.4.9"
    }