Vue.jsでクリックしたときに変数の中身をChildコンポーネントに送信するにはどうすればよいですか?

実現したいこと

TimeLine.vue(Parent) と Suspended Memo.vue(Child) という 2 つのコンポーネントがあります。

TimeLine.vue(Parent)

vue.js

1computed: { 2 optionsData () { 3 groupTemplate: (item, element, data) => { 4 if (!item) return 5 var container = document.createElement('div') 6 if (item.isDisable !== true) container.setAttribute('class', 'enable') 7 var i = document.createElement('i') 8 // click 9 i.addEventListener('click', () => { 10 // itemのidを取得してSuspendedMemoに渡す 11 var itemId = item.id 12 const url = `/shop/${this.selectedShopId}/room/${itemId}/suspend_memo` 13 console.log('Timeline of URL’, url) 14 this.data = item.suspendedReserveMemo 15 this.openMemo() 16 }) 17 i.setAttribute('class', 'v-icon notranslate mr-2 mdi mdi-close-circle theme--light pink--text') 18 container.appendChild(i) 19 var span = document.createElement('span') 20 span.innerHTML = item.content 21 container.appendChild(span) 22 return container 23 } 24 } 25 return _.merge({}, base, this.options) 26 } 27 },

↑をクリックすると、変数「url」をSuspendedMemo.vue(Child)コンポーネントに渡すにはどうすればよいですか?

発生している問題・分からないこと

変数「url」をSuspendedMemo.vue(Child)コンポーネントに渡せない

エラーメッセージ

error

1NULLと表示されます

該当のソースコード

特になし

試したこと・調べたこと

上記の詳細・結果

変数「url」をSuspendedMemo.vue(Child)コンポーネントに渡せない

補足

特になし