VueUse OnClickOutside игнорирует параметры, которые не работают

Ссылки автоматически разворачиваются при использовании в шаблоне, поэтому вместо предоставления опции игнорирования объекта ref ему предоставляется внутреннее значение, не являющееся ссылкой. Если вы предоставите объект параметров, созданный в вашем коде <script>, он должен работать:

<template>
  <button id = "button1" ref = "tempRef" class = "button">AAA</button>
  <OnClickOutside
    id = "clickOutside"
    :options = "options"
    @trigger = "console.info(tempRef)"
  >
    <button id = "button2" class = "button">BBB</button>
  </OnClickOutside>
</template>

<script setup>
import { OnClickOutside } from '@vueuse/components'
import { ref } from 'vue'

const tempRef = ref()

const options = { ignore: [tempRef] }
</script>

Опции игнорирования также может быть присвоена строка выбора, поэтому вы можете использовать ее в качестве альтернативы, если вам нужно решение только для шаблона:

<OnClickOutside
  id = "clickOutside"
  :options = "{ ignore: ['#button1'] }"
  @trigger = "console.info(tempRef)"
>