Vue - slot content is not being parsed and updated

[KevinHoppeLS]

Hello,

I am currently implementing twemoji in my vue web app.

I have built a custom directive which parses the emojis on mounted and on updated hooks.

When I apply the directive the the wrapper component which holds child components via slot and the content of the child component changes, the content is not parsed and updated properly.

Any idea how to fix this?

This is the directive

export default { mounted(el) { nextTick(() => { twemoji.parse(el, { folder: "emojis", ext: ".svg", base: "/assets/", className: "emoji", }); }); }, updated(el) { nextTick(() => { twemoji.parse(el, { folder: "emojis", ext: ".svg", base: "/assets/", className: "emoji", }); }); }, };

This is for example the component using slots

<template> <div v-twemoji :class="[textBoxClasses, $slots.title ? 'flex flex-col gap-2' : '']" > <slot name="title"></slot> <slot></slot> </div> </template>