Vue 3 usage of v-model changes Bootstrap 5 table class

Question

Below is an example of the code I was writing:

<table class="table table-striped">
      <tr class="table-dark">
        <th>#</th>
        <th>Column 1</th>
        <th colspan="3">Column 2</th>
      </tr>
      <tr class="table-info">
        <th></th>
        <th>Title</th>
        <th>0</th>
        <th>1</th>
        <th>2</th>
      </tr>
      <tr>
        <td></td>
        <td>Category</td>
        <td>
          <input
            class="form-check-input"
            type="radio"
            name="category"
            value="0"
            v-model="categoryMdl"
          />
        </td>
        <td>
          <input
            class="form-check-input"
            type="radio"
            name="category"
            value="1"
            v-model="categoryMdl"
          />
        </td>
        <td>
          <input
            class="form-check-input"
            type="radio"
            name="category"
            value="2"
            v-model="categoryMdl"
          />
        </td>
      </tr>
</table>

Initially, before I added the v-model, the code was displaying the Bootstrap 5 table classes correctly. It was only after I added that the classes in the table were not working properly.

I have other bootstrap classes out of the table and it is working fine.

Any idea why introducing v-model into my table column interferes with the bootstrap class? And is there a way to fix it?

I'm at a loss as I have only recently started using Vue. Tried looking up solutions but the closest I got was "putting them in the child element". But my input is the child element and it's creating havoc.