<script setup>
  import { reactive } from 'vue'
  import LinkList from "./LinkList.vue"

  const links = reactive([
  {
    id: 1,
    name: "AA",
    bookmarked: false,
  },
  {
    id: 2,
    name: "BB",
    bookmarked: false,
  }
  ])
</script>

<template>
  <LinkList :links="links" v-slot="{ link,  bookmarkButtonAttrs, bookmarkButtonEvents, bookmarkNow }">
    <button 
    v-bind="bookmarkButtonAttrs"
    @mouseover="bookmarkNow()"
    v-on="bookmarkButtonEvents"
    >{{ link.name }}</button> 
    |
  </LinkList>
</template>