Getting typeError: Cannot convert object to primitive value in rendering for compostion api setup hook - vue 3

Question

In my vue 3 application, i am creating a functional component using composition api. In this setup hook, i am passing data reactive object for style and class. After running the application, i am getting this type error.

Here is my setup function:

setup(props, context) {
   const data = reactive({
      style: {},
      class: []
   });
   let moreIcons = {};
   
    let cColor ='';
     if (props.primary||props.prim) { cColor= 'primary'; }
     else if (props.point||props.pnt) { cColor= 'point'; }
     else if (props.default||props.dft) { cColor= 'default'; }
     else if (!!props.color||!!props.col) { cColor= props.color||props.col; }

    let cSize = '' ;
     if(props.large || props.lg) {cSize= 'large';}
     else if(props.medium || props.md) {cSize= 'medium';}
     else if(props.small || props.sm) {cSize= 'small';}
     else if(props.xsmall || props.xs) {cSize= 'xsmall';}
     else if(props.full) {cSize= 'full';} 

    let customSize = props.iconSize || props.size;
     if(parseInt(customSize, 10)) {customSize = customSize + 'px';}
    let iconName = props.icon || context.slots.default().text;
    let options = {
        class: [
            'ur-icon',
            'ur-icon--'+cType,
            cColor && 'ur-icon--'+cColor,
            cSize &&'ur-icon--'+cSize,
            props.spacing && 'ur-icon--spacing'
        ],
        style: {
            fontSize: customSize
        },
        on: context.emit('click') // **getting error because of this**
    };
    
    if(data.class) {
        if(Array.isArray(data.class)) {
            options.class = options.class.concat(data.class);
        }
        if(typeof data.class === 'string' || typeof data.class === 'object') {
            options.class.push(data.class);
        }
    }
    if(data.style) {
        options.style = Object.assign(data.style, options.style);
    }
    if (moreIcons[iconName] !== undefined) {
        options.class.push('more-icon__'+iconName);
        let svg = moreIcons[iconName];
        if(!props.focusable) {svg = svg.replace('<svg ','<svg focusable="false" ');}
        options.domProps={innerHTML:svg};
    } else {
        // 1. icon class
        options.class.push('fa-'+iconName);
        // 2. type class
        if     ( props.brand )   { options.class.push('fab'); }
        else if( props.fab)      { options.class.push('fab'); }
        else if( props.regular ) { options.class.push('far'); }
        else if( props.far )     { options.class.push('far'); }
        else if( props.light)    { options.class.push('fal'); }
        else if( props.fal)      { options.class.push('fal'); }
        else if( props.old)      { options.class.push('fa'); }
        else if( props.fa)       { options.class.push('fa'); }
        else { options.class.push("fas"); }
    }
    return () => h('i',Object.assign(data, options));
}

After running the application, i am getting error(typeError:Cannot convert object to primitive value) because of 'on' event listeners. I have commented that error line in code. I am not able to understand how to resolve this.