Auto Resize Textarea (inertia.js, vue3)

app.js

require('./bootstrap');
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3'; 

import AutoResizeTextarea from '@/AutoResizeTextarea'

/*....*/

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    progress: {
        color: '#1e293b',
    },
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, App, props, plugin }) {

        let ap = createApp({ render: () => h(App, props) })
            .use(......)
            /* more */
            .use(AutoResizeTextarea)
            /* more */
            .mixin({ methods: { route } });

            ap.config.globalProperties.$moment=moment;

            return ap.mount(el);
    },
});

AutoResizeTextarea.js

export default {
    install: (app) => {
        app.directive("autoresize", {
            mounted(el) {
                el.style.height = el.scrollHeight < 64 ? '64px' : el.scrollHeight + 'px';
                el.style.overflow = 'hidden';

                el.addEventListener('input', () => {
                    el.style.height = 'auto';
                    el.style.height = el.scrollHeight < 64 ? '64px' : el.scrollHeight + 'px';
                });
            }
        });
    },
};

index.html

<!-- use directive v-autoresize -->
<textarea v-model="form.text" class="form-textarea" v-autoresize></textarea>