Nuxt 3 custom string Interpolation using dynamic component

Hope you are all doing well. Just want to know if someone already tried to create their own interpolation using dynamic component. Already been fixing this for days but still can’t figure it out.

<template>
  <h4>Hi!</h4>
  <component
    :is="{
      template: dynamicTemp,
    }"
  />
</template>
<script setup lang="ts">
const firstName = "Joe";
const useInputContent = "<h3>Welcome {name}</h3>";

// Replace {name} to "Joe"
const dynamicTemp = useInputContent.replace("{name}", firstName);
</script>

// nuxt.config.ts
export default defineNuxtConfig({
  ssr: false,
});

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "^3.4.1"
  }
}

When I’m running that, I’m getting this warning: [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias “vue” to “vue/dist/vue.esm-bundler.js”.

Will really appreciate the help. Thanks