help: The object containing exported methods in the setup function is an empty object.

[ziyoonee]

📚 What are you trying to do? Please describe. The following is the code I am using.

<template>
        <Filter
          @search="actions.search"
        />
</template>
<script lang="ts">
import {
  useFetch,
  defineComponent,
} from '@nuxtjs/composition-api';
import Filter from '~/components/Filter.vue';
export default defineComponent({
  components: { Filter },
  setup() {

    const actions = {
      search: async () => {
         // ~~
       } 
    };

    useFetch(async () => {
      await actions.search();
    });

    return {
      actions
    };
  },
});
</script>

When I write it like this, I get a Invalid handler for event "search": got undefined error. The actions object is an empty object and this error only occurs during server-side rendering.

🔍 What have you tried? If I destructure the actions object or wrap it in computed, the problem is solved, but I'm curious why I have to use it this way. Is it because of serialization? If so, could you share some documentation that I can refer to for understanding?

ℹ️ Additional context

"nuxt": "^2.15.8",
"@nuxtjs/composition-api": "^0.33.1",