How to set item-wise custom template in Vue Toolbar

The Toolbar supports adding template commands using the template property. Template property can be given as the HTML element that is
either a string or a query selector.

As a string

The HTML element tag can be given as a string for the template property. Here, the checkbox is rendered as a HTML template.

template: "<div><input type='checkbox' id='check1' checked=''>Accept</input></div>"

As a selector

The template property also allows getting template content through query selector. Here, checkbox ‘ID’ attribute is specified in the template.

template: "#Template"
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:100%;">
      <br>
      <ejs-toolbar>
        <e-items>
          <e-item text='Cut'></e-item>
          <e-item type='Separator'></e-item>
          <e-item text='Paste'></e-item>
          <e-item type='Separator'></e-item>
          <e-item :template='templateEle'></e-item>
          <e-item text='Undo'></e-item>
          <e-item text='Redo'></e-item>
          <e-item :template='templateEleId'></e-item>
        </e-items>
      </ejs-toolbar>
    </div>
  </div>
</template>
<script setup>

import { ToolbarComponent as EjsToolbar, ItemsDirective as EItems, ItemDirective as EItem } from "@syncfusion/ej2-vue-navigations";

const templateEle = '<input placeholder="Search" style="height:27px;"/>';
const templateEleId = '#Template';

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:100%;">
      <br>
      <ejs-toolbar>
        <e-items>
          <e-item text='Cut'></e-item>
          <e-item type='Separator'></e-item>
          <e-item text='Paste'></e-item>
          <e-item type='Separator'></e-item>
          <e-item :template='templateEle'></e-item>
          <e-item text='Undo'></e-item>
          <e-item text='Redo'></e-item>
          <e-item :template='templateEleId'></e-item>
        </e-items>
      </ejs-toolbar>
    </div>
  </div>
</template>
<script>

import { ToolbarComponent, ItemDirective, ItemsDirective, } from "@syncfusion/ej2-vue-navigations";

export default {
  name: "App",
  components: {
    "ejs-toolbar": ToolbarComponent,
    "e-items": ItemsDirective,
    "e-item": ItemDirective
  },
  data() {
    return {
      templateEle: '<input placeholder="Search" style="height:27px;"/>',
      templateEleId: '#Template'
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>