v-for と v-card の組み合わせで Use v-bind or the colon shorthand instead というエラーが起きた

Vue始めました。

まだ何も知らないんですが、今後のメモみたいな感じで残せたらと。
今回はvuetifyも使う環境でやっているのでvueというかvuetifyに関することのほうが多いかも。

やりたいこと

カードコンポーネントをループさせて、動的にデータを表示させたい。

<v-col cols=6 v-for="card in cards" v-bind:key="card.title">
  <v-card 
    href="{{card.url}}"
    target="{{card.target}}"
    class="mx-auto"
    max-width="100%"
    outlined a
    hover
  >
    <v-list-item>
      <v-list-item-avatar
        tile
        size="40"
        color="grey"
      ></v-list-item-avatar>
      <v-list-item-content>
        <v-list-item-title class="headline mb-1">
          {{card.title}}
        </v-list-item-title>
        <v-list-item-subtitle>{{card.summary}}</v-list-item-subtitle>
      </v-list-item-content>
    </v-list-item>
  </v-card>
</v-col>

エラー

単なるテキスト表示とかは問題なくできたが、v-cardのPropsにあるhrefやtargetにデータを指定するとエラーが出ました。
書き方が悪いみたいです。

(Emitted value instead of an instance of Error)

  Errors compiling template:

  href="{{card.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">.

  9  |        <v-col cols=6 v-for="card in cards" v-bind:key="card.title">
  10 |
  11 |          <v-card
     |
  12 |            href="{{card.url}}"
     |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  13 |            target="{{card.target}}"

修正後

新しいもの勉強するときってググるのも一苦労ですよね。

<v-col cols=6 v-for="card in cards" v-bind:key="card.title">

  <v-card 
    :href="card.url"
    :target="card.target"
    class="mx-auto"
    max-width="100%"
    outlined 
    hover
  >
    <v-list-item>
      <v-list-item-avatar
        tile
        size="40"
        color="grey"
      ></v-list-item-avatar>
      <v-list-item-content>
        <v-list-item-title class="headline mb-1">
          {{card.title}}
        </v-list-item-title>
        <v-list-item-subtitle>{{card.summary}}</v-list-item-subtitle>
      </v-list-item-content>
    </v-list-item>
  </v-card>
</v-col>

できた

ちなみにscript部分はこんなかんじです。

export default {
  auth: false,
  data () {
    return {
      cards: [
          {
          url: "http://url1.html",
          target: "_blank",
          title: "AAAAAAA",
          summary: "AAAAAAAAAAAAAAAAAAAAA"
          },
          {
          url: "http://url2.html",
          target: "",
          title: "BBBBBBBB",
          summary: "BBBBBBBBBBBBBBBBBBBBBBBB"
          },
          {
          url: "http://url3.html",
          target: "_blank",
          title: "CCCCCCCCCCC",
          summary: "CCCCCCCCCCCCCCCCCCCCCC"
          },
          {
          url: "http://url4.html",
          target: "_blank",
          title: "DDDDDDDDDDDDDDD",
          summary: "DDDDDDDDDDDDDDDDDDDDDDDDDDDDDD"
          } 
        ]
    }
  }
}