wish to use this in Nuxt3, typescript, composition API

[MicroDreamIT]

here is code i am using

<template>
    <div class="container mx-auto">
        <div class="grid grid-cols-12 gap-1">
            <div class="col-span-4">
                <div class="flex flex-col">
                    <div class="flex">
                        <Icon name="et:alarmclock" class="mr-2" color="red" size="24px"/>
                        <p>{{$dayjs(eventDetail.event_date_start).format('dddd MMM YYYY')}}</p>
                    </div>
                </div>
            </div>
            <div class="col-span-8">
                <AddToCalendar
                        name="Title"
                        options="'Apple','Google'"
                        location="World Wide Web"
                        startDate="2023-06-09"
                        endDate="2023-06-09"
                        startTime="10:15"
                        endTime="23:30"
                        timeZone="America/Los_Angeles"
                ></AddToCalendar>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>

    import AddToCalendar from 'vue-add-to-calendar';
    
    const route = useRoute();
    const id = (route.params.id).split('-')[0];
    const {data: eventDetail} = await useFetch('http://localhost:8000/api/events/' + id)

</script>

<style scoped>

</style>

but no luck its saying

chunk-3Q27KRJ5.js:97 [Vue warn]: Component is missing template or render function. 
  at <Anonymous name="Title" options="'Apple','Google'" location="World Wide Web"  ... > 
  at <[id] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouteProvider key="/events/34-detail-east-pm-usually-else()" routeProps= {Component: {…}, route: {…}} pageKey="/events/34-detail-east-pm-usually-else()"  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Default > 
  at <LayoutLoader key="default" name="default" hasTransition=false > 
  at <NuxtLayout> 
  at <App key=3 > 
  at <NuxtRoot>