Reactive object does not trigger asyncData

[zecar]

Environment

---

• Operating System: Darwin
• Node Version: v20.12.2
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: pnpm@8.15.6
• Builder: -
• User Config: srcDir, devtools, modules, ignore, appConfig, css, extensions, routeRules, vue, nitro, runtimeConfig, auth, colorMode, router, csurf
• Runtime Modules: @nuxt/eslint@0.3.12, @nuxt/test-utils/module@3.12.1, @unocss/nuxt@0.60.0, @sidebase/nuxt-auth@0.7.2, @nuxt/ui@2.16.0, @pinia/nuxt@0.5.1, nuxt-csurf@1.5.2
• Build Modules: -

---

Reproduction

<template>
	<USelectMenu
		v-model="eventTypeFilter.selected"
		:options="eventTypeFilter.options"
		searchable
		multiple
		placeholder="Event type filter" />
</template>

<script setup lang="ts">
const page = ref(1)
const eventTypeFilter = reactive({
  options: ['a', 'b', 'c'],
  selected: []
})

const { data, pending } = await useAsyncData(
  'events',
  () => $fetch('/api/events', {
    params: {
      page: page.value,
      eventTypeFilter: eventTypeFilter.selected
    }
  }),
  {
    watch: [page, eventTypeFilter.selected]
  }
)
</script>

Describe the bug

choosing a value does not trigger another fetch

Additional context

If I use a ref array for the model and pass that to the watcher, it works
const selectedEventTypes = ref([])

Logs

No response

[zecar]

this was fixed by reading the docs on watchers :|

{
	watch: [() => eventTypeFilter.selected]
}