Vue.jsのコンポーネントの扱い方について

Question

コンポーネントを使い再利用しながら、各リンクをそれぞれ別なものにしたいです。
うまく表示できていませんが、現在のコードとなります。

<div id="app">
  <component-txt title="タイトル1" content="内容1" :url="https://google.com"></component-txt>
</div>

Vue.component('component-txt', {
  template:`
   <div>
    <p>{{ title }}</p>
    <p>{{ content }}</p>
    <a :href={{ url }}>リンク</a>
   </div>
  `,
  props: ['title','content','url']
})



new Vue({
  el: '#app',
})

Answer 1

new Vue({
  el: '#app',
  data() {
    return {
      url: ""
    }
  }
})

初期値を空にして、html側でurlの中身を書き換えたら無事に解決できました。