How to avoid hydration missmatch when using a dynamic template?

import { h } from 'vue';
import Tooltip from '~/components/OTooltip.vue';

export default {
  props: {
    content: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const renderContent = {
      components: {
        Tooltip,
      },
      template: `<div class="article__body">${props.content}</div>`,
    };
    return () => {
      return h(renderContent);
    };
  },
};
</script>