Vue bootstrap table: button in column not rendering

I have a Vue Bootstrap table with a "cosimo" column that includes a button to launch a modal. However, the button is not rendering properly and does not work when clicked. Here is the code for the column:

columns: [
{
  title: "Cosimo",
  field: "component.name",
  sortable: true,
  formatter: (value, row, index) => {
    return `
      <b-button v-b-modal.modal-1 @click="showModal"
        >Launch demo modal</b-button
      >
  `;
  }
}, ...]

I've checked the Vue Bootstrap documentation and I believe I've followed the correct syntax for creating a button that launches a modal. However, the button is not working and the HTML is not rendering properly. Can anyone help me identify the issue? Thanks in advance! It works outside the table in the template part.

EDIT
I am rendering the column with this code:

<bootstrap-table
  ref="table"
  :columns="columns"
  :data="data"
  :options="options"
  @on-load-success="tableLoaded"
>
  <template v-slot:cell(component.name)>
    <span><b-btn @click="showModal(item)">Launch Demo Modal</b-btn></span>
  </template>
</bootstrap-table>

And then the columns entry:

        {
      title: "Cosimo Recommendation",
      field: "component.name",
      sortable: true
    },

I'm not sure which version of bootstrap-vue you're using, but if you're on version 2.23.0, then you can use slots for adding buttons and other HTML elements, see below example of info model button in documentation:

https://bootstrap-vue.org/docs/components/table#complete-example

You can achieve this by using slot in the template itself for that particular column.

<b-table :items="items" :fields="fields">
    <template v-slot:cell(<component.name>)="{ item }">
      <span><b-btn @click="showModal(item)">Launch Demo Modal</b-btn></span>
    </template>
</b-table>

You can see cell({key}) slot here