Why can't the text in the element be updated later when using the directive?

Question

Vue.js

I have a directive with which you can make a normal display of emoji (from a simple emoji, an img is made with a picture of this emoji).
Here is the directive itself:

Vue.directive('emoji', (el) => {
  el.innerHTML = emoji(el.innerHTML);
});

Here is the template part:

<div class="conversation_name" v-emoji>{{ chatName }}</div>

chatName is a computed property that changes from time to time, but this does not happen using the directive. How to make everything work properly?

Answer 1

Vue.directive('emoji', (el, binding) => el.innerHTML = emoji(binding.value));

<div class="conversation_name" v-emoji="chatName"></div>

Answer 2

Make a regular component instead of a directive, it fits more in its essence here.

export default {
  name: 'EmojiImage',
  props: {
    emoji: 'String'
  },
  computed: {
    image() {
      return ''; \\ Здесь сформируйте url картинки, это так же позволит использовать кэш, загружать их асинхронно
    }
  }

}

<template>
  <span class="emoji-image">
    <img :src="image" :alt="emoji" />
  </span>
</template>

<EmojiImage :emoji="emoji" />