Currently, I'm used to create my components as classes. A basic example:

export default class PageHeader {

    protected container: HTMLElement | null;
    protected trigger: HTMLButtonElement | null;
    protected uiPanel: HTMLElement | null;
    protected isOpen = false;

    public constructor() {
        this.container = document.querySelector('.c-header');
        this.trigger = (this.container) ? this.container.querySelector('.c-header__ui-trigger') : null;
        this.uiPanel = (this.container) ? this.container.querySelector('.c-header__ui') : null;
        if (this.container && this.trigger && this.uiPanel) {
            this.init();
        }
    }

    protected init(): void {
        if (this.trigger instanceof HTMLButtonElement) {
            this.trigger.addEventListener('click', (e) => {
                if (this.isOpen) {
                    this.close();
                } else {
                    this.open();
                }
            })
        }
    }

    protected open(): void {
        this.uiPanel?.classList.add('c-header__ui--open');
        this.trigger?.classList.add('c-header__ui-trigger--active');
        this.isOpen = true;
    }

    protected close(): void {
        this.uiPanel?.classList.remove('c-header__ui--open');
        this.trigger?.classList.remove('c-header__ui-trigger--active');
        this.isOpen = false;
    }

}

"Translating" this into function based style:

export default function pageHeaderComponent(): void {

    const container: HTMLElement | null = document.querySelector('.c-header');
    const trigger: HTMLButtonElement | null = (container) ? container.querySelector('.c-header__ui-trigger') : null;
    const uiPanel: HTMLElement | null = (container) ? container.querySelector('.c-header__ui') : null;
    let isOpen = false;
    if (container && trigger && uiPanel) {
        trigger.addEventListener('click', (e) => {
            e.preventDefault();
            if (isOpen) {
                close();
            } else {
                open();
            }
        })
    }

    function open(): void {
        uiPanel?.classList.add('c-header__ui--open');
        trigger?.classList.add('c-header__ui-trigger--active');
        isOpen = true;
    }

    function close(): void {
        uiPanel?.classList.remove('c-header__ui--open');
        trigger?.classList.remove('c-header__ui-trigger--active');
        isOpen = false;
    }

}

I personally prefer classes, as in my opinion they are better readable and can handle "this" better. But developing more and more with Vue 3, I'm getting more and more used to the function way.

So my questions:

• What are pros and cons of the two ways above? Or is it all just a matter of personal preferences?
• What about the build size using webpack / babel? Does classes generate larger outputs?