(Vue.js3)チェックボックスで選択されたIDを取得し、そのIDに紐づいたValueを表示させたい

Question

現在、オブジェクトが内包された配列 data からチェックボックス(inputタグ)を生成しており、v-model="selectedDataID" で選択中のIDを取得できるようにしております。(仮定として、1つのみ選択されているものとします)
そのIDを const selectedDataID = ref([]) により取得できたのですが、そのIDに一致した data.value を取り出し表示をさせる方法が分かりません。
ご教示いただけますと大変幸いです。
宜しくお願い致します。

<script setup>
import { ref } from "vue"
const selectedDataID = ref([])
const data = [
        {
            "id": 1,
            "value": "Foo"
        },
        {
            "id": 2,
            "value": "Bar"
        },
]
</script>

<template>
  <div class="container">
    <div>
      <div v-for="d in data" :key="d">
        <input type="checkbox" v-model="selectedDataID" :value="d.id" checked>
        <span>{{ d.id }} {{ d.value }}</span>
      </div>
    </div>

    <!-- ※※※以下の表示を選択中のidに基づいたvalueとしたい※※※ -->
    <p>選択中のidから取得したvalue: {{ selectedDataValue }}</p>

  </div>
</template>

Answer 1

自己解決しました。
新たに格納用のrefを生成 + findメソッドでできました。

const myDog = dogs.find(dog => dog.name === 'ポメラニアス3世');

https://qiita.com/diescake/items/70d9b0cbd4e3d5cc6fce