Text only showing up in td element and not HTML - vue.js

Question

I have a table td element that only shows this and I don't need it to appear like that but only as a blank space.
new Vue({
el: '#app2',
beforeCreate: function() {
},
created: function() {
},
mounted: function() {},
data: {
itemPriceList: [],
orderItems: [{
globalGroupName: "-- ABC"
},
{
globalGroupName: "-- CDE"
},
{
globalGroupName: "--- FGH"
},
{
globalGroupName: "- IJK"
},
{
globalGroupName: "-- LMN"
}
],
priceList: null
},
methods: {
GetOrderItems: function() {
},
ReplaceDashesInGlobalGroups: function(globalGroupName) {
if (globalGroupName[0] === "-") {
// Remove leading dashes and replace with a blank space
console.log("ReplaceDashesInGlobalGroups");
return globalGroupName.replace(/-(?![a-zA-Z])|-(?=\s|-)/g, ' ');
}
return globalGroupName;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="app2">
<table class="table table-striped table-bordered table-hover" style="width:350px;">
<thead class="thead-dark">
<tr>
<th width="235px"><label>Global Name</label></th>
</tr>
</thead>
<tbody>
<template v-for="global in orderItems">
<tr>
<td>{{ ReplaceDashesInGlobalGroups(global.globalGroupName) }}</td>
</tr>
</template>
</tbody>
</table>
</div>

Answer 1

Try this:
<td v-html="ReplaceDashesInGlobalGroups(global.globalGroupName)"></td>
This should be rendered as HTML now instead of just plain text. Note this can open you up to XSS attacks.
Source: Documentation
Updates the element’s innerHTML. Note that the contents are inserted
as plain HTML - they will not be compiled as Vue templates. If you
find yourself trying to compose templates using v-html, try to rethink
the solution by using components instead.
Dynamically rendering arbitrary HTML on your website can be very
dangerous because it can easily lead to XSS attacks. Only use v-html
on trusted content and never on user-provided content.
In single-file components, scoped styles will not apply to content
inside v-html, because that HTML is not processed by Vue’s template
compiler. If you want to target v-html content with scoped CSS, you
can instead use CSS modules or an additional, global <style> element
with a manual scoping strategy such as BEM.